Web Components

Awesome Web Components

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

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

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

Introduction

• An Introduction to Web Components
• What are browser-native web components?
• Web Components 101
• Intro to Web Components
• MDN - Web Components
• The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
• The Power of Web Components

Standards

Custom Elements

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

• HTML Living Standard: Custom elements
• A Guide to Custom Elements for React Developers
• All about HTML Custom Elements
• Custom Elements v1: Reusable Web Components
• Handy Custom Elements' Patterns
• MDN - Using Custom Elements
• web-platform-tests

Shadow DOM

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

• DOM Living Standard: Interface ShadowRoot
• DOM Living Standard: Shadow tree
• MDN - Using Shadow DOM
• Open vs. Closed Shadow DOM
• Shadow DOM in depth
• Shadow DOM v1: Self-Contained Web Components
• The Rise of Shadow DOM
• Understanding Slot Updates with Web Components
• What is the Shadow DOM?
• web-platform-tests

HTML Templates

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

• HTML Living Standard: The template element
• MDN - <template>: The Content Template element
• MDN - Using templates and slots
• web-platform-tests

CSS Shadow Parts

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

• W3C First Public Working Draft
• CSS Shadow Parts are coming!
• MDN - ::part() CSS pseudo element
• MDN - part global attribute
• ::part and ::theme, an ::explainer
• web-platform-tests

Guides

Accessibility

• Accessibility for Web Components
• Accessibility with ID Referencing and Shadow DOM
• Dialogs and shadow DOM: can we make it accessible?
• How to Make Accessible Web Components — a Brief Guide
• Managing focus in the shadow DOM
• The future of accessibility for custom elements
• The Guide to Accessible Web Components
• Web Components and the Accessibility Object model (AOM)
• Web Components punch list
• Web components still need to be accessible

Best Practices

• Custom Element Best Practices
• Developing Components: Publishing
• Gold Standard Checklist for Web Components
• Guidelines for creating web platform compatible components
• How to Publish Web Components to NPM
• Open Web Components Recommendations

Codelabs

• Build a Story Web Component with LitElement
• Building Custom Elements with Web Components for the 2020 Elections
• Building Web Components with Vanilla JavaScript
• Creating a Reusable Avatar Web Component
• Creating Custom Form Controls with ElementInternals
• Creating Web Components with Stencil
• From Web Component to Lit Element
• Getting started with LitElement and TypeScript
• Handling data with Web Components
• How to use D3js with WebComponents
• Introduction to Storybook for Web Components
• Navigation Lifecycle using Vaadin Router, LitElement and TypeScript
• Open Web Components: Codelabs
• Recreating The Arduino Pushbutton Using SVG And <lit-element>
• Routing Management with LitElement and TypeScript
• Snake-Eating Game Making with Web Components of Omi and MVP Architecture
• Storybook for web components on steroids
• Testing Workflow for Web Components
• Web Components Tools: A Comparison

Examples

• generic-components - 专注于可访问性和易用性的通用 Web 组件集合.
• howto-components - 实现常见 Web UI 模式的 Web 组件集合.
• Nude UI - 可访问、可自定义、超轻型 Web 组件的集合.
• open-wc code examples - Collection of best practices and design patterns for developing web components.
• vanilla-retro-js - HTML 弃用标签的 Vanilla JS UI 组件库.
• web-components-examples - 一系列网络组件示例，与 MDN 网络组件文档相关.

Articles

Architecture

• A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends
• Frankenstein Migration: Framework-Agnostic Approach (Part 1)
• Frankenstein Migration: Framework-Agnostic Approach (Part 2)
• Generating Config driven Dynamic Forms using Web Components
• Hiding internal framework methods and properties from web component APIs
• How to deliver Custom Elements
• Making Web Components for Different Contexts
• Supporting both automatic and manual registration of custom elements
• Web Components — the right way

Interoperability

• Custom Elements Everywhere
• Custom Elements That Work Anywhere
• JavaScript frameworks, meet Web Components
• Web Components aren't a framework replacement - they're better than that
• Web Components: Seamlessly interoperable

Limitations

• Beyond the polyfills: how Web Components affect us today?
• Custom elements, shadow DOM and implicit form submission
• Form-associated custom elements
• You might not need shadow DOM

Styling

• Does shadow DOM improve style performance?
• Eschewing Shadow DOM
• How Nordhealth uses Custom Properties in Web Components
• Options for styling web components
• Style scoping versus shadow DOM: which is fastest?
• Styling a Web Component
• Styling in the Shadow DOM With CSS Shadow Parts
• Thinking Through Styling Options for Web Components
• Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think
• Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements

Real World

Case Studies

• Apple Just Shipped Web Components to Production and You Probably Missed It
• Bringing Order to Web Design Chaos (with Web Components)
• Get moving with Microsoft’s FAST web components
• How Web Components Are Used at GitHub and Salesforce
• How we use Web Components at GitHub
• Implementing a Design Language System with Stencil.js
• ING ❤ Web Components
• ING Open-Sources Lion, Its White-Label Web Component Library – Q&A with Thomas Allmer
• Lessons Learned, making our app with Web Components
• Looking back on five years of web components
• Shipping Web Components in 2020
• The Firefox UI is now built with Web Components
• Using web components to encapsulate CSS and resolve design system conflicts
• Web Components at GitHub - Web Components SF Meetup
• Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt
• Web Development At Scale: Composable Applications With Web Components
• web.dev engineering blog #1: How we build the site and use Web Components

Components

• <api-viewer> - Web 组件的 API 文档和实时游乐场.
• <chess-board> - 独立的棋盘网络组件.
• <css-doodle> - 用于使用 CSS 绘制图案的 Web 组件.
• <dark-mode-toggle> - 允许创建暗模式切换或开关的自定义元素.
• <emoji-picker> - 轻量级表情符号选择器，作为网络组件分发.
• <fg-modal> - 可访问的模式对话框 Web 组件.
• <file-viewer> - 使用 Svelte 构建的用于查看文件的 Web 组件.
• <json-viewer> - 用于在树视图中可视化 JSON 数据的 Web 组件.
• <lite-youtube> - 专注于视觉性能的精简版 YouTube 嵌入.
• <midi-player> - MIDI 文件播放器和可视化 Web 组件.
• <model-viewer> - 用于呈现交互式 3D 模型的 Web 组件.
• <player-x> - 媒体播放器网络组件.
• <progressive-image> - 自定义元素以逐步增强图像占位符.
• <range-slider> - 具有键盘支持的可访问范围滑块自定义元素.
• <rapi-doc> - 用于根据 OpenAPI 规范创建文档的 Web 组件.
• <shader-doodle> - 用于编写和渲染着色器的 Web 组件.
• <theme-switch> - 动画切换按钮可在浅色、深色和系统主题之间切换.
• <trix-editor> - 用于日常写作的富文本编辑器自定义元素.
• <vime-player> - 可定制、可扩展、可访问且与框架无关的媒体播放器.
• <web-vitals> - 带来 web vitals 使用自定义元素快速进入您的页面.

Component Libraries

• AMP - 用于轻松创建用户至上的网站、故事、广告、电子邮件等的 Web 组件框架.
• Apollo Elements - 将 Apollo GraphQL 与各种 Web 组件库结合使用的自定义元素.
• AXA Pattern Library - 使用 Web 组件构建的 AXA CH UI 组件库.
• Blackstone UI - 由 Blackstone Publishing 创建界面的 Web 组件.
• Blaze UI Atoms - Set of web components powered by Blaze CSS.
• Brightspace UI core - 用于构建 Brightspace 应用程序的 Web 组件集合.
• Clever components - 由 Clever Cloud 制作的 Web 组件集合.
• Curvenote - 用于创建交互式科学文章的 Web 组件.
• DataFormsJS - 用于 SPA 路由、显示来自 Web 服务的数据等的独立组件.
• Dile Components - 一般用于网站和应用程序的 Web 组件.
• elements-sk - 为“a la carte”网络开发定制元素的集合.
• github-elements - GitHub 的 Web 组件集合.
• Elix - 用于常见用户界面模式的高质量、可定制的 Web 组件.
• Furo Webcomponents - 企业就绪的 Web 组件集，最适合与 Eclipse Furo 配合使用.
• Fusion Web Components - Equinor Fusion 使用的一系列 Web 组件.
• Ignite UI Web Components - 来自 Infragistics 的完整 UI 组件库.
• Immersive Custom Elements - 一组用于嵌入沉浸式（VR 和 AR）内容的 Web 组件.
• Joomla UI custom elements - 编译 Joomla 4 自定义元素.
• Ketch.UP - Sme.UP 的 Web 组件库.
• Lion Web Components - 一组高性能、可访问且灵活的 Web 组件.
• LRNWebComponents - ELMS:LN 为任何项目制作了网络组件.
• Lume - 用于定义使用 CSS3D 或 WebGL 呈现的 2D 或 3D 场景的自定义元素.
• Medblocks UI - 用于快速开发 openEHR 和 FHIR 系统的 Web 组件.
• Microsoft Graph Toolkit - Microsoft Graph 的 Web 组件集合.
• Mutation testing elements - 用于变异测试结果的模式，使用 Web 组件将其可视化.
• Nightingale - 用于生命科学的数据可视化 Web 组件.
• Nuxeo Elements - 使用 Web 组件使用 Nuxeo 构建 Web 应用程序的组件.
• One Platform Components - 一套用于 Red Hat One Platform 的网络组件.
• Open Business Application Platform Web Components - 专为业务应用程序设计的 Web 组件集合.
• Pixano Elements - 专用于数据注释任务的可重用网络组件.
• Playground Elements - 使用 Web 组件的无服务器代码体验.
• Shoelace - 具有前瞻性的网络组件库.
• Smart Web Components - 业务应用程序的 Web 组件.
• Stripe Elements - Stripe.js v3 元素的自定义元素包装器.
• TEI Publisher Components - TEI Publisher 使用的网络组件及其生成的应用程序的集合.
• Titanium Elements - Leavitt Group Enterprises 使用的轻量级 Web 组件集合.
• Tradeshift Elements - 可重用的 Tradeshift UI 组件作为 Web 组件.
• Umbraco UI Components - Umbraco CMS 的用户界面 Web 组件集合.
• Vaadin components - 用于构建业务 Web 应用程序的一组不断发展的高质量 Web 组件.
• VSCode Webview Elements - 用于创建使用 Webview API 的 VSCode 扩展的组件.
• Warp View - Warp 10 的图表网络组件集合.
• Webmarkets web components - 一组 Webmarkets 的公共 Web 组件.
• Wired Elements - 一组具有手绘、粗略外观的常用 UI 元素.
• Wokwi Elements - Arduino 和各种电子部件的 Web 组件.
• XWeather - 实现部分 OpenWeatherMap API 的 Web 组件集合.

Design Systems

• Astro Space UX Design System - 一组组件，用于通过已建立的交互模式构建丰富的空间应用程序体验.
• Auro Design System - 阿拉斯加航空公司设计系统，以创新理念和合作未来.
• Bolt Design System - Twig 和 Web 组件驱动的 UI 组件、可重用的视觉样式和工具.
• Calcite Components - Esri 方解石设计框架的共享 Web 组件.
• Carbon Web Components - Web 组件之上的 Carbon Design System 变体.
• Clarity Core Web Components - 来自 Clarity Design System 的网络组件套件.
• Crayons - 符合 Freshworks 设计系统的网络组件集合.
• FAST Components - 基于 FAST 设计语言的 Web 组件库.
• Fluent UI Web Components - 支持 Microsoft Fluent 设计语言的 Web 组件库.
• Forge Components - 遵循 Forge 设计系统的 Web 组件库.
• GOV.UK Web Components - 一组使用 GOV.UK 设计系统的封装 Web 组件.
• Helix UI - Helix 设计系统的 Web 组件库.
• Liquid - 基于 Liquid Design System 的 UI 组件库.
• Lyne Components - Lyne 设计系统的构建块基于 Web 组件.
• Material Web Components - 作为 Web 组件实现的 Material Design.
• Momentum UI Web Components - 一组基于 Momentum Design 的 UI 组件.
• Nord - Nordhealth 的产品、数字体验和品牌设计系统.
• NuML | NUDE Elements - 基于 Web 组件和运行时 CSS 生成的 HTML 框架和设计系统.
• OutlineJS - 基于网络组件的设计系统入门工具包.
• PatternFly Elements - 基于统一设计工具包的灵活轻量级 Web 组件集合.
• Pharos Design System - JSTOR 的设计系统可创造有凝聚力、支持性和美好体验.
• Red Hat Design System - 用于构建 Red Hat 品牌统一体验的 Web 组件.
• Siemens iX Web Components - 实施西门子 iX 设计系统的 Web 组件.
• Spectrum Web Components - 使用 Web 组件构建的 Adob​​e Spectrum 设计语言实现.
• UI5 Web Components - 一组实施 SAP Fiori 设计指南的可重用 UI 元素.
• U-M Library Design System - 密歇根大学图书馆设计系统.
• Zooplus web components - 一套实施 Z+ 商店风格指南的网络组件.

Use Cases

• How we chose to build our Design System using StencilJS Web Components
• How searching for a bundle-free React led me to web components
• Reasons Web Components are perfect for a big company
• 5 Reasons Web Components Are Perfect for Design Systems
• Web components: the secret ingredient helping power the web
• Web Components for Enterprise. Part 1: Salesforce, Oracle, SAP
• Web Components for Enterprise. Part 2: Nuxeo, Ionic, Vaadin
• Why I use Web Components - My use cases
• Why we use Web Components 经过 @viljamis
• Why we use Web Components 经过 @maxlynch

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

• ember-custom-elements - 使用自定义元素渲染 Ember 和 Glimmer 组件.
• preact-custom-element - 从 preact 组件生成/注册自定义元素.
• @adobe/react-webcomponent - 在自定义元素中自动包装 React 组件.
• nuxt-custom-elements - 将您的项目组件导出为自定义元素以集成到外部页面中.
• react-shadow - 在 React 中使用 Shadow DOM，享受样式封装的所有好处.
• reactify-wc - 使用具有 React 属性和功能的 Web 组件.
• remount - 使用自定义元素将 React 组件挂载到 DOM.
• @riotjs/custom-elements - 使用 Riot.js 创建香草自定义元素的简单 API.

Benchmarks

• All the Ways to Make a Web Component
• web-components-benchmark - 使用各种示例对 Web 组件技术进行基准测试.
• web-components-todo - 在不同的 Web 组件库中构建相同的待办事项应用程序以用于基准测试.

Frameworks

Angular

• Angular Elements Overview
• Building and consuming Angular Elements as Web Components
• How to use Angular ngModel and ngForms with WebComponents
• Using Web Components in Angular
• Web Components With Angular Ivy In 6 Steps

React

• 3 Approaches to Integrate React with Custom Elements
• Building Interoperable Web Components That Even Work With React
• Rendering React Components With Custom Elements
• How to use Web Components in React
• Using Web Components With Next (or Any SSR Framework)

Vue

• Using Web Components in Vue

Svelte

• Svelte Custom Element API
• How to Create a Web Component in Svelte
• Svelte Web Component — 5.4KB

Ecosystem

Starter Kits

• Create Open Web Components - Web 组件项目脚手架.
• custom-element-boilerplate - 用于创建自定义元素的样板.
• hello-web-components - 用 TypeScript 编写的简单入门 hello world web 组件.
• nutmeg - 构建、测试和发布带有一点香料的普通 Web 组件.

Tools

• Backlight — 以开发人员和设计师之间的协作为核心，Backlight 是一个非常完整的编码平台，团队可以在其中构建、记录、发布、扩展和维护设计系统.
• Custom Elements Locator - 用于在页面上查找自定义元素的 Chrome 扩展.
• query-selector-shadow-dom - 可以穿透 Shadow DOM 根的 querySelector，对自动化测试很有用.
• shadow-automation-selenium - 使用 Selenium 的 Shadow DOM 自动化.
• shadow-dom-utils - 一组有用的实用程序，用于处理影子 DOM，主要用于测试环境.
• @storybook/web-components - 用于纯 Web 组件片段的 UI 开发环境.
• webcomponents.dev - 面向 Web 平台开发人员的组件 IDE.
• web-component-analyzer - 分析网络组件并发出文档/诊断的 CLI.
• Web Components Codemods - Web 组件的 Codemod.

Books

• Web Components in Action - Ben Farrell 的书，可在 Manning 早期发布计划中获得.
• Web Component Essentials - Cory Rylan 的书，Leanpub 提供的早期预览版.

Tutorials

• “让我们构建 Web 组件！”作者： Benny Powers
• Part 1: The Standards
• Part 2: The Polyfills
• Part 3: Vanilla Components
• Part 4: Polymer Library
• Part 5: LitElement
• Part 6: Gluon

• Part 7: Hybrids

• “Web 组件：从零到英雄”，作者： Pascal Schilp

• Part 1: An introduction to writing raw Web Components
• Part 2: Supercharging Web Components with lit-html

• Part 3: Web Components hero with LitElement

• “现代 JavaScript 教程”，作者： Ilya Kantor

• Part 1: From the orbital height
• Part 2: Custom Elements
• Part 3: Shadow DOM
• Part 4: Template element
• Part 5: Shadow DOM slots, composition
• Part 6: Shadow DOM styling

• Part 7: Shadow DOM and events

• “HowTo：组件”作者 Web Fundamentals

• Overview
• <howto-checkbox>
• <howto-tabs>

• <howto-tooltip>

• CSS 技巧 文章系列，作者： Caleb Williams

• Part 1: An Introduction to Web Components
• Part 2: Crafting Reusable HTML Templates
• Part 3: Creating a Custom Element from Scratch
• Part 4: Encapsulating Style and Structure with Shadow DOM

• Part 5: Advanced Tooling for Web Components

• Angular Elements 文章系列，作者： Manfred Steyer

• Part I: A Dynamic Dashboard In Four Steps With Web Components
• Part II: Lazy and External Web Components
• Part III: Angular Elements Without Zone.Js
• Part IV: Content Projection with Slots in Angular Elements (>=7)
• Part V: Your Options for Building Angular Elements with the CLI

Insights

Podcasts

• Code[ish]，第 38 集：使用 Web 组件构建
• Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM
• Labs Talk - Web Components with Peter Muessig
• Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald
• Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement

Presentations

• Are Web Components the Betamax of web development? 经过 @lostinbrittany
• Designing St和ard Systems 经过 @stefsull 和 @bferrua
• Frontend Architecture for Scalable Design Systems 经过 @salem_cobalt
• lit-apollo: Data-Driven Components that Use the Platform 经过 @PowersBenny
• Mastering Shadow DOM 经过 @Martine_Dowden
• Modernizing Large Frontends with Web Components 经过 @samjulien
• Shadow DOM: off the beaten track 经过 @serhiikulykov
• Using Web Components to Build a Framework-agnostic UI Library 经过 @brianbouril 和 @danciupuliga
• Web Components and the AOM 经过 @LeonieWatson
• Web Components and Styles Scoping 经过 @bashmish
• Web Components can do that?! 经过 @vogloblinsky
• Web Components: Introduction and State of the Art 经过 @webcomp_dev

Talks

• Better Apps: Delivering Universal UI Patterns as Web Components 经过 @janmiksovsky
• Custom Web Shadow Elements, or Whatever… 经过 @aerotwist
• Styling and Theming Web Components 经过 @justinfagnani
• Web Components at Enterprise Scale 经过 @diervo

Usage Metrics

• Chrome Platform Status: CustomElementRegistryDefine
• Chrome Platform Status: ElementAttachShadow
• Chrome Platform Status: HTMLTemplateElement

Proposals

Form-associated Custom Elements

• Form Participation API Explained - Google Chrome 团队的文档.
• Form-associated custom elements - Chrome 平台状态中的功能.
• web-platform-tests

Custom State Pseudo class

• Blink: Intent to implement
• ElementInternals's states property and the :state() pseudo class

Constructable Stylesheet Objects

• Specification Draft
• web-platform-tests
• Explainer
• Constructable Stylesheets - Chrome 平台状态中的功能.

Miscellaneous

• bruck - 使用 Web 组件和 Houdini Paint API 构建的原型系统.
• Vaadin Directory - 发布、讨论和评价 Web 组件
• webcomponents.org - 讨论和分享网络组件.

Archive

Polyfills

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

Custom Elements polyfills

• @webcomponents/custom-elements - Polymer 团队的自定义元素 polyfill.
• document-register-element - Andrea Giammarchi 的自定义元素 polyfill.

Customized Built-in Elements polyfills

• @corpuscule/custom-builtin-elements - 自定义内置元素 polyfill CorpusculeJS.
• @ungap/custom-elements-builtin - 自定义内置元素 polyfill ungap project.

Shadow DOM shims

• @webcomponents/shadydom - ShadowDOM v1 垫片.
• @webcomponents/shadycss - ShadowDOM 风格的封装垫片.
• @lwc/synthetic-shadow - Shadow DOM polyfill LWC.

HTML Templates polyfills

• @webcomponents/template - 的最小 polyfill<template>.
• @ungap/import-node - 用于 IE11 的 importNode polyfill ungap project.

History

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

2019

• A history of the HTML slot element
• Web Components for Cross-Framework Component Libraries
• Web Components in 2019: Part 1
• Web Components in 2019: Part 2
• Web Components in 2019: Part 3
• Web Components in 2019: Part 4
• Developments in Web Components I’m excited about in 2019

2018

• Styling Accessibility: A Web Components Approach
• Web Components 101: An Introduction to Web Components
• Get started with Vue web components
• 6 Reasons You Should Use Native Web Components
• Web Components in 2018
• Web Components Introduction: Creating Custom HTML Elements in 2018
• Create & Publish Web Components With Vue CLI 3
• Extending Native DOM Elements with Web Components

2017

• Styling is critical to web component reuse, but may prove difficult in practice
• Web Components: The Long Game
• Web Components: Just in the Nick of Time (Polymer Summit 2017)
• Using Web Components in Ionic (Polymer Summit 2017)
• Web Components for VR (Polymer Summit 2017)
• Building UI at Enterprise Scale with Web Components (Polymer Summit 2017)
• Custom Elements Everywhere (Polymer Summit 2017)
• Evolving the Next Generation of Polymer Elements (Polymer Summit 2017)
• Polymer @ YouTube (Polymer Summit 2017)
• Web Components for CMS (Polymer Summit 2017)
• An intro to web components with otters
• The broken promise of Web Components
• Regarding the broken promise of Web Components
• Web Components v1 - the next generation

2016

• Introducing Custom Elements
• The Case for Custom Elements: Part 1
• The Case for Custom Elements: Part 2
• Demythstifying Web Components
• Extensible web components
• Web Component Challenges
• Web Components and progressive enhancement
• Update on standardizing Shadow DOM and Custom Elements
• What's New in Shadow DOM v1 (by examples)
• Why web components are so important
• Understanding Web Components

2015

• Introducing Slot-Based Shadow DOM API
• There is an Element for that
• What happened to Web Components?
• Web Components and their role in the future of web development
• Microsoft Edge and Web Components
• Bringing componentization to the web: An overview of Web Components
• Why Web Components will make the web a better place for our users
• Practical Questions around Web Components
• The state of Web Components

2014

• A No-Nonsense Guide to Web Components, Part 1: The Specs
• A No-Nonsense Guide to Web Components, Part 2: Practical Use
• Web Components + Backbone: A Game-Changing Combination
• Mozilla and Web Components: Update
• Server-less applications powered by Web Components
• Web Components and the Future of CSS
• Easy composition and reuse with Web Components
• Let’s build some apps with Polymer!
• Polymer: State of the Union
• Web Components 101: An Introduction to Fundamental Changes in HTML
• Web Components 201: Designing Web Components for Reuse
• Why Web Components — Does the Web Really Need Another Component?
• “Don’t stop thinking about tomorrow” - AngularJS and Web Components
• Multi-device Apps with Web Components
• As I Walk Through The Valley Of The Shadow Of DOM
• Why Web Components Are Ready For Production
• The State of the Componentised Web
• An Addendum to Why Web Components Aren't Ready for Production Yet
• Why Web Components Aren't Ready for Production... Yet
• Component Interop With React And Custom Elements
• Accessibility of Web Components
• Componentize The Web: Back To The Browser!
• Google I/O 2014 - Polymer and the Web Components revolution
• Google I/O 2014 - Polymer and Web Components change everything you know about Web development
• Google I/O 2014 - Unlock the next era of UI development with Polymer
• Making Polymer Elements Accessible
• Building an Accessible Disclosure Button – using Web Components
• The Road to Web Components
• The Web Components Revolution is Here
• Web Components: A chance to create the future
• Web Component Mashups at 3 a.m.
• Web Components Tools & Libraries
• Web Components Can Do That?!
• Web Components and you – dangers to avoid
• HTML as Custom Elements
• The Web's Declarative, Composable Future
• Using Polymer to Create Web Components
• The Shadow DOM Diaries
• A Detailed Introduction To Custom Elements

2013

• A future called Web Components
• Building Mobile Web Applications With Brick
• Polymer: declarative, encapsulated, and reusable components for the web
• Web Components: Why you're already an expert
• Yo Polymer: a new way of building web apps
• Performance and Custom Elements
• Web Components Revolution
• A Guide to Web Components
• Return of Inspector Web: Web Components a Year Later
• Working with Custom Elements
• Creating Reusable Markup with The HTML Template Element
• Working with Shadow DOM
• Breaking Development: Web Components
• Web Components: A Tectonic Shift for Web Development - Google I/O 2013
• Web Components: Getting Started
• Shadow DOM 101
• Shadow DOM 201
• Shadow DOM 301
• Visualizing shadow DOM concepts
• Web components and the future of web development
• HTML's New Template Tag

2012

• The Basics of the Shadow DOM
• Notes on Web Components + ARIA
• Google I/O 2012 - The Web Platform's Cutting Edge
• Introduction to Web Components

2011

• Web Components and Model Driven Views by Alex Russell
• What the Heck is Shadow DOM?

Who To Follow

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

Maintainers

• 由...制作 @mateusortiz 2014年.
• 由维护 @web-padawan 自 2018 年以来.

License