Skip to content

Web Components

Awesome Web Components

Awesome

很棒的 Web 组件资源的精选列表.

> 注意 > 这个项目之前被命名为“Web Components the Right Way”

Web Components — 一套不同的技术,允许您创建可重用的自定义元素——将它们的功能封装在其余代码之外——并在您的 Web 应用程序中使用它们.

Introduction

Standards

Custom Elements

自定义元素为作者提供了一种构建自己的全功能 DOM 元素的方法.

Shadow DOM

Shadow DOM 描述了一种将多个 DOM 树组合成一个层次结构的方法,以及这些树如何在文档中相互交互,从而实现更好的 DOM 组合.

HTML Templates

<template> 元素用于声明可以通过脚本克隆和插入文档的 HTML 片段.

CSS Shadow Parts

CSS Shadow Parts 允许开发人员在 Shadow DOM 中公开某些元素以用于样式目的.

Guides

Accessibility

Best Practices

Codelabs

Examples

Articles

Architecture

Interoperability

Limitations

Styling

Real World

Case Studies

Components

Component Libraries

Design Systems

Use Cases

Libraries

Class Based

  • DNA - 渐进式 Web 组件库.
  • FAST Element - 用于构建高性能、内存高效、符合标准的 Web 组件的轻量级库.
  • Forge Core - 构建 Forge Web 组件时使用的构建块和实用程序.
  • Joist - 一组小型库,旨在将最低限度添加到 Web 组件,以提高您的工作效率.
  • Lit - 用于构建快速、轻量级 Web 组件的简单库.
  • Lightning Web Components - 快速的企业级 Web 组件基础.
  • Omi - 4kb JavaScript 中的下一代 Web 框架(Web 组件 + JSX + 代理 + 存储 + 路径更新).
  • Panel - Web Components + Virtual DOM:强大 UI 的 Web 标准.
  • slim.js - 基于现代标准的快速稳健的前端微框架.
  • Stencil - 用于生成 Web 组件的编译器.
  • Tonic - 极简、稳定、审计友好的组件框架.

Functional

  • atomico - 用于使用函数和挂钩创建基于 Web 组件的界面的小型库.
  • haunted - 为 Web 组件实现的 React 的 Hooks API.
  • hybrids - 用于使用简单实用的 API 创建 Web 组件的 UI 库.
  • Solid Element - 扩展 Solid 添加自定义 Web 组件和扩展的库.

Integrations

Benchmarks

Frameworks

Angular

React

Vue

Svelte

Ecosystem

Starter Kits

Tools

Books

Tutorials

Insights

Podcasts

Presentations

Talks

Usage Metrics

Proposals

Form-associated Custom Elements

Custom State Pseudo class

Constructable Stylesheet Objects

Miscellaneous

Archive

Polyfills

现代浏览器支持 Web 组件标准,无需下面列出的任何 polyfill. 唯一值得注意的例外是定制的内置元素被 WebKit (Safari) 拒绝.

Custom Elements polyfills

Customized Built-in Elements polyfills

Shadow DOM shims

HTML Templates polyfills

History

下面的文章讲述了 Web Components 规范走向标准化的漫长故事. 其中一些参考了早期所谓的“v0”Shadow DOM 和自定义元素规范,并放弃了 HTML 导入规范. 这些材料仅出于历史原因放在这里,它们按年份分组并按时间顺序列出.

2019

2018

2017

2016

2015

2014

2013

2012

2011

Who To Follow

聚合物
模版
open-wc.org
webcomponents.dev
贾斯汀·法尼亚尼
维尔贾米·萨尔米宁
扬·米克索夫斯基
谢尔盖·库雷科夫

Maintainers

License

CC0