Web 组件相关资源

痛定思痛。 2023-09-28 09:13 39阅读 0赞

[GitHub - mateusortiz/webcomponents-the-right-way: This is a guide intended to introduce to Web Components. Everyone can contribute here!This is a guide intended to introduce to Web Components. Everyone can contribute here! - GitHub - mateusortiz/webcomponents-the-right-way: This is a guide intended to introduce to Web Components. Everyone can contribute here!![fluidicon.png][]https://github.com/mateusortiz/webcomponents-the-right-way][GitHub - mateusortiz_webcomponents-the-right-way_ This is a guide intended to introduce to Web Components. Everyone can contribute here_This is a guide intended to introduce to Web Components. Everyone can contribute here_ - GitHub - mateusortiz_webcomponents-the-right-way_ This is a guide intended to introduce to Web Components. Everyone can contribute here_fluidicon.png_https_github.com_mateusortiz_webcomponents-the-right-way]

> 精选的 Web Components 资源列表。

[Web 组件][Web]——一套不同的技术，允许你创建可重用的自定义元素——它们的功能被封装在你的代码的其余部分之外——并在你的 Web 应用程序中使用它们。

### 内容 ###

*  [介绍][Link 1]
 *  [标准][Link 2]
    
     *  [自定义元素][Link 3]
     *  [影子 DOM][DOM]
     *  [HTML 模板][HTML]
     *  [CSS 阴影部分][CSS]
 *  [填充物][Link 4]
    
     *  [自定义元素 polyfill][polyfill]
     *  [定制的内置元素 polyfill][polyfill 1]
     *  [Shadow DOM 垫片][Shadow DOM]
     *  [HTML 模板 polyfills][HTML _ polyfills]
 *  [指南][Link 5]
    
     *  [可访问性][Link 6]
     *  [最佳实践][Link 7]
     *  [代码实验室][Link 8]
     *  [例子][Link 9]
 *  [文章][Link 10]
    
     *  [建筑学][Link 11]
     *  [互操作性][Link 12]
     *  [限制][Link 13]
     *  [造型][Link 14]
 *  [真实世界][Link 15]
    
     *  [实例探究][Link 16]
     *  [成分][Link 17]
     *  [组件库][Link 18]
     *  [设计系统][Link 19]
     *  [用例][Link 20]
 *  [图书馆][Link 21]
    
     *  [基于类][Link 22]
     *  [功能性][Link 23]
     *  [集成][Link 24]
     *  [基准][Link 25]
 *  [构架][Link 26]
    
     *  [角][Link 27]
     *  [反应][Link 28]
     *  [见过][Link 29]
     *  [苗条][Link 30]
 *  [生态系统][Link 31]
    
     *  [入门套件][Link 32]
     *  [工具][Link 33]
 *  [图书][Link 34]
 *  [教程][Link 35]
 *  [见解][Link 36]
    
     *  [播客][Link 37]
     *  [演示文稿][Link 38]
     *  [会谈][Link 39]
 *  [使用指标][Link 40]
 *  [提案][Link 41]
    
     *  [表单相关的自定义元素][Link 42]
     *  [可构造的样式表对象][Link 43]
     *  [自定义状态伪类][Link 44]
 *  [各种各样的][Link 45]
 *  [历史][Link 46]
 *  [关注谁][Link 47]
 *  [执照][Link 48]

> Web Components the Right Way 由[Mateus Ortiz][]精心制作，由[Serhii Kulykov维护][Serhii Kulykov]

### 介绍 ###

*  [网页组件 101][101]
 *  [Web 组件简介][Web 1]
 *  [MDN - Web 组件][Web]
 *  [可重用组件的圣杯：自定义元素、Shadow DOM 和 NPM][Shadow DOM _ NPM]
 *  [Web 组件的力量][Web 2]

### 标准 ###

#### 自定义元素 ####

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

*  [HTML 生活标准：自定义元素][HTML 1]
 *  [React 开发人员自定义元素指南][React]
 *  [关于 HTML 自定义元素][HTML 2]
 *  [自定义元素 v1：可重用的 Web 组件][v1_ Web]
 *  [方便的自定义元素的模式][Link 49]
 *  [MDN - 使用自定义元素][MDN -]
 *  [网络平台测试][Link 50]

#### 影子 DOM ####

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

*  [DOM 生活标准：接口ShadowRoot][DOM _ShadowRoot]
 *  [DOM 生活标准：影子树][DOM 1]
 *  [MDN - 使用影子 DOM][MDN - _ DOM]
 *  [开放式与封闭式 Shadow DOM][Shadow DOM 1]
 *  [Shadow DOM 深入浅出][Shadow DOM 2]
 *  [Shadow DOM v1：自包含的 Web 组件][Shadow DOM v1_ Web]
 *  [Shadow DOM 的兴起][Shadow DOM 3]
 *  [了解 Web 组件的槽更新][Web 3]
 *  [什么是影子 DOM？][DOM 2]
 *  [网络平台测试][Link 51]

#### HTML 模板 ####

`<template>`element 用于声明可以通过脚本克隆并插入到文档中的 HTML 片段。

*  [HTML 生活标准：template元素][HTML _template]
 *  [MDN - <template>：内容模板元素][MDN - _template]
 *  [MDN - 使用模板和插槽][MDN - 1]
 *  [网络平台测试][Link 52]

#### CSS 阴影部分 ####

CSS Shadow Parts 允许开发人员在 Shadow DOM 中公开某些元素以进行样式设置。

*  [W3C 第一个公共工作草案][W3C]
 *  [CSS 阴影部分来了！][CSS 1]
 *  [MDN - ::part()CSS 伪元素][MDN - _part_CSS]
 *  [MDN -part全局属性][MDN -part]
 *  [::part 和 ::theme，一个 ::explainer][part _ _theme_ _explainer]
 *  [网络平台测试][Link 53]

#### 填充物 ####

#### 自定义元素 polyfill ####

*  [@webcomponents/custom-elements][webcomponents_custom-elements] \- Polymer 团队的自定义元素 polyfill。
 *  [document-register-element][] \- Andrea Giammarchi 的自定义元素 polyfill.

#### 定制的内置元素 polyfill ####

*  [@corpuscule/custom-builtin-elements][corpuscule_custom-builtin-elements] \- CorpusculeJS 定制的内置元素[polyfill][polyfill 2]。
 *  [@ungap/custom-elements-builtin - 由][ungap_custom-elements-builtin -][ungap 项目][ungap]定制的内置元素polyfill 。

#### Shadow DOM 垫片 ####

*  [@webcomponents/shadydom][webcomponents_shadydom] \- ShadowDOM v1 垫片。
 *  [@webcomponents/shadycss][webcomponents_shadycss] \- ShadowDOM 样式封装垫片。
 *  [@luck/synthetic-shadow - ][luck_synthetic-shadow -][LWC][]的Shadow DOM polyfill 。

#### HTML 模板 polyfills ####

*  [@webcomponents/template][webcomponents_template] \- 用于`<template>`.
 *  [@ungap/import-node][ungap_import-node] \-由[ungap project][ungap]`importNode`为 IE11 提供的polyfill 。

### 指南 ###

#### 可访问性 ####

*  [Web 组件的可访问性][Web 4]
 *  [如何制作可访问的 Web 组件——简要指南][Web 5]
 *  [自定义元素可访问性的未来][Link 54]
 *  [可访问 Web 组件指南][Web 6]
 *  [Web 组件和可访问性对象模型 (AOM)][Web _ _AOM]
 *  [Web 组件穿孔清单][Web 7]
 *  [Web 组件仍然需要可访问性][Web 8]

#### 最佳实践 ####

*  [自定义元素最佳实践][Link 55]
 *  [开发组件：发布][Link 56]
 *  [Web 组件的黄金标准清单][Web 9]
 *  [创建 Web 平台兼容组件的指南][Web 10]
 *  [如何将 Web 组件发布到 NPM][Web _ NPM]
 *  [开放式 Web 组件建议][Web 11]

#### 代码实验室 ####

*  [使用 LitElement 构建 Story Web 组件][LitElement _ Story Web]
 *  [使用 Web 组件为 2020 年选举构建自定义元素][Web _ 2020]
 *  [使用 Vanilla JavaScript 构建 Web 组件][Vanilla JavaScript _ Web]
 *  [创建可重用的 Avatar Web 组件][Avatar Web]
 *  [使用 Stencil 创建 Web 组件][Stencil _ Web]
 *  [从 Web 组件到 Lit 元素][Web _ Lit]
 *  [LitElement 和 TypeScript 入门][LitElement _ TypeScript]
 *  [使用 Web 组件处理数据][Web 12]
 *  [如何在 WebComponents 中使用 D3js][WebComponents _ D3js]
 *  [Web 组件故事书简介][Web 13]
 *  [使用 Vaadin Router、LitElement 和 TypeScript 的导航生命周期][Vaadin Router_LitElement _ TypeScript]
 *  [开放式 Web 组件：Codelabs][Web _Codelabs]
 *  [使用 SVG 和重新创建 Arduino 按钮<lit-element>][SVG _ Arduino _lit-element]
 *  [使用 LitElement 和 TypeScript 进行路由管理][LitElement _ TypeScript 1]
 *  [使用 Omi 和 MVP 架构的 Web 组件制作吃蛇游戏][Omi _ MVP _ Web]
 *  [类固醇上的 Web 组件故事书][Web 14]
 *  [Web 组件的测试工作流程][Web 15]
 *  [Web 组件工具：比较][Web 16]

#### 例子 ####

*  [generic-components][] \- 通用 Web 组件的集合，重点是可访问性和易用性。
 *  [howto-components][] \- 实现常见 Web UI 模式的 Web 组件的集合。
 *  [open-wc 代码示例][open-wc]\- 用于开发 Web 组件的最佳实践和设计模式的集合。
 *  [vanilla-retro-js][] \- 不推荐使用 HTML 标记的 Vanilla JS UI 组件库。
 *  [web-components-examples][] \- 一系列 Web 组件示例，与 MDN Web 组件文档相关。

### 文章 ###

#### 建筑学 ####

*  [深入分析同构、自主的跨框架使用\#MicroFrontends][MicroFrontends]
 *  [科学怪人迁移：与框架无关的方法（第 1 部分）][1]
 *  [科学怪人迁移：与框架无关的方法（第 2 部分）][2]
 *  [使用 Web 组件生成配置驱动的动态表单][Web 17]
 *  [从 Web 组件 API 隐藏内部框架方法和属性][Web _ API]
 *  [如何交付自定义元素][Link 57]
 *  [为不同的上下文制作 Web 组件][Web 18]
 *  [支持自定义元素的自动和手动注册][Link 58]
 *  [Web 组件——正确的方法][Web 19]

#### 互操作性 ####

*  [无处不在的自定义元素][Link 59]
 *  [随处可用的自定义元素][Link 60]
 *  [JavaScript 框架，遇见 Web 组件][JavaScript _ Web]
 *  [Web 组件不是框架的替代品——它们比这更好][Web 20]
 *  [Web 组件：无缝互操作][Web 21]

#### 限制 ####

*  [超越 polyfill：Web 组件如何影响今天的我们？][polyfill_Web]
 *  [自定义元素、影子 DOM 和隐式表单提交][DOM 3]
 *  [表单相关的自定义元素][Link 61]
 *  [你可能不需要影子 DOM][DOM 4]

#### 造型 ####

*  [用于设置 Web 组件样式的选项][Web 22]
 *  [样式化 Web 组件][Web 23]
 *  [使用 CSS 阴影部分在 Shadow DOM 中设置样式][CSS _ Shadow DOM]
 *  [样式对于 Web 组件的重用至关重要，但在实践中可能会很困难][Web 24]
 *  [思考 Web 组件的样式选项][Web 25]
 *  [Web 标准符合用户领域：使用 CSS-in-JS 来设置自定义元素的样式][Web _ CSS-in-JS]

### 真实世界 ###

#### 实例探究 ####

*  [Apple 刚刚将 Web 组件投入生产，你可能错过了][Apple _ Web]
 *  [为 Web 设计混乱带来秩序（使用 Web 组件）][Web _ Web]
 *  [开始使用 Microsoft 的 FAST Web 组件][Microsoft _ FAST Web]
 *  [GitHub 和 Salesforce 如何使用 Web 组件][GitHub _ Salesforce _ Web]
 *  [我们如何在 GitHub 上使用 Web 组件][GitHub _ Web]
 *  [使用 Stencil.js 实现设计语言系统][Stencil.js]
 *  [在❤网页组件][Link 62]
 *  [ING 开源 Lion，其白标 Web 组件库 – 与 Thomas Allmer 的问答][ING _ Lion_ Web _ _ _ Thomas Allmer]
 *  [经验教训，使用 Web 组件制作我们的应用程序][Web 26]
 *  [回顾五年的 Web 组件][Web 27]
 *  [2020 年发布 Web 组件][2020 _ Web]
 *  [Firefox UI 现在使用 Web 组件构建][Firefox UI _ Web]
 *  [使用 Web 组件封装 CSS 并解决设计系统冲突][Web _ CSS]
 *  [GitHub 上的 Web 组件 - Web 组件 SF 聚会][GitHub _ Web _ - Web _ SF]
 *  [Salesforce 的大规模 Web 组件：遇到的挑战，吸取的教训][Salesforce _ Web]
 *  [大规模 Web 开发：使用 Web 组件的可组合应用程序][Web _ Web 1]
 *  [web.dev 工程博客 \#1：我们如何构建站点和使用 Web 组件][web.dev _ _1_ Web]

#### 成分 ####

*  [<api-viewer>][api-viewer]\- Web 组件的 API 文档和现场操场。
 *  [<chess-board>][chess-board]\- 独立的棋盘网络组件。
 *  [<css-doodle>][css-doodle]\- 使用 CSS 绘制图案的 Web 组件。
 *  [<dark-mode-toggle>][dark-mode-toggle]\- 允许创建暗模式切换或切换的自定义元素。
 *  [<emoji-picker>][emoji-picker]\- 轻量级的表情选择器，作为 Web 组件分发。
 *  [<fg-modal>][fg-modal]\- 可访问的模式对话框 Web 组件。
 *  [<file-viewer>][file-viewer]\- 使用 Svelte 构建的用于查看文件的 Web 组件。
 *  [<json-viewer>][json-viewer]\- 在树视图中可视化 JSON 数据的 Web 组件。
 *  [<lite-youtube>][lite-youtube]\- Lite YouTube 嵌入，专注于视觉表现。
 *  [<midi-player>][midi-player]\- MIDI 文件播放器和可视化 Web 组件。
 *  [<model-viewer>][model-viewer]\- 用于渲染交互式 3D 模型的 Web 组件。
 *  [<player-x>][player-x]\- 媒体播放器 Web 组件。
 *  [<progressive-image>][progressive-image]\- 自定义元素逐步增强图像占位符。
 *  [<range-slider>][range-slider]\- 具有键盘支持的可访问范围滑块自定义元素。
 *  [<rapi-doc>][rapi-doc]\- 用于从 OpenAPI 规范创建文档的 Web 组件。
 *  [<shader-doodle>][shader-doodle]\- 用于编写和渲染着色器的 Web 组件。
 *  [<trix-editor>][trix-editor]\- 用于日常写作的富文本编辑器自定义元素。
 *  [<vime-player>][vime-player]\- 可定制、可扩展、可访问且与框架无关的媒体播放器。
 *  [<web-vitals>][web-vitals]\-使用自定义元素将[Web Vitals快速带入您的页面。][Web Vitals]

#### 组件库 ####

*  [AMP][] \- Web 组件框架，用于轻松创建用户至上的网站、故事、广告、电子邮件等。
 *  [Apollo Elements][] \- 用于将 Apollo GraphQL 与各种 Web 组件库一起使用的自定义元素.
 *  [AXA Pattern Library][] \- 使用 Web 组件构建的 AXA CH UI 组件库.
 *  [Blackstone UI][] \- Blackstone Publishing 用于创建界面的 Web 组件。
 *  [Blaze UI Atoms][] \- 一组由 Blaze CSS 提供支持的 Web 组件。
 *  [Brightspace UI 核心][Brightspace UI]\- 用于构建 Brightspace 应用程序的 Web 组件集合。
 *  [Clever components][] \- 由 Clever Cloud 制作的 Web 组件集合.
 *  [DataFormsJS][] \- 用于 SPA 路由、显示来自 Web 服务的数据等的独立组件。
 *  [elements-sk][] \- 用于“点菜”Web 开发的自定义元素的集合。
 *  [github-elements][] \- GitHub 的 Web 组件集合。
 *  [Elix][] \- 用于常见用户界面模式的高质量、可定制的 Web 组件。
 *  [沉浸式自定义元素][Link 63]\- 一组用于嵌入沉浸式（VR 和 AR）内容的 Web 组件。
 *  [Iooxa][] \- 用于交互式科学写作、反应式文档和可探索解释的 Web 组件。
 *  [Joomla UI 自定义元素][Joomla UI]\- Joomla 4 自定义元素的编译。
 *  [Ketch.UP][] \- Sme.UP 的 Web 组件库。
 *  [Lion Web Components][] \- 一组高性能、可访问且灵活的 Web 组件。
 *  [LRNWebComponents][] \- ELMS:LN 为任何项目生成 Web 组件。
 *  [Lume][] \- 用于定义使用 CSS3D 或 WebGL 渲染的 2D 或 3D 场景的自定义元素。
 *  [Microsoft Graph Toolkit][] \- Microsoft Graph 的 Web 组件集合。
 *  [Nightingale][] \- 生命科学的数据可视化 Web 组件。
 *  [Nuxeo Elements][] \- 使用 Web 组件使用 Nuxeo 构建 Web 应用程序的组件。
 *  [Open Business Application Platform Web Components][] \- 为业务应用程序设计的 Web 组件的集合。
 *  [Pixano Elements][] \- 专用于数据注释任务的可重用 Web 组件。
 *  [Shoelace][] \- 一个具有前瞻性的 Web 组件库。
 *  [Smart Web Components][] \- 用于业务应用程序的 Web 组件。
 *  [TEI Publisher Components][] \- TEI Publisher 使用的 Web 组件及其生成的应用程序的集合。
 *  [Tradeshift Elements][] \- 可重用的 Tradeshift UI 组件作为 Web 组件。
 *  [Vaadin components][] \- 用于构建业务 Web 应用程序的不断发展的高质量 Web 组件集。
 *  [Warp View][] \- Warp 10 的图表 Web 组件集合.
 *  [有线元素][Link 64]\- 一组具有手绘粗略外观的常见 UI 元素。
 *  [Wokwi Elements][] \- 用于 Arduino 和各种电子零件的 Web 组件。
 *  [XWeather][] \- 实现部分 OpenWeatherMap API 的 Web 组件的集合。

#### 设计系统 ####

*  [Amber Components][] \- Amber 设计系统的 Web 组件实现。
 *  [Bolt Design System][] \- Twig 和 Web 组件驱动的 UI 组件，可重用的视觉样式和工具。
 *  [Calcite Components][] \- 用于 Esri 的 Calcite 设计框架的共享 Web 组件。
 *  [Carbon Custom Elements][] \- 基于 Web 组件的 Carbon 设计系统变体。
 *  [Chameleon Web Components][] \- 基于 Chameleon 设计系统的与框架无关的元素的集合。
 *  [Clarity Core Web Components][] \- 来自 Clarity 设计系统的 Web 组件套件。
 *  [Crayons][] \- 遵循 Freshworks 设计系统的 Web 组件集合。
 *  [FAST Components][] \- 基于 FAST 设计语言的 Web 组件库。
 *  [Fluent UI Web Components][] \- 支持 Microsoft 的 Fluent 设计语言的 Web 组件库。
 *  [GOV.UK Web Components][] \- 一组使用 GOV.UK 设计系统的封装 Web 组件。
 *  [Helix UI][] \- Helix 设计系统的 Web 组件库。
 *  [Lyne 组件][Lyne]\- Lyne 设计系统的构建块基于 Web 组件。
 *  [Material Web Components][] \- 作为 Web 组件实现的 Material Design。
 *  [数字语言 | NUDE Elements][_ NUDE Elements] \- 基于 Web 组件和运行时 CSS 生成的 HTML 框架和设计系统。
 *  [PatternFly Elements][] \- 基于统一设计工具包的灵活和轻量级 Web 组件的集合。
 *  [Pearson Web Components][] \- Pearson 实现 Gravity 设计系统的可共享组件库。
 *  [Spectrum Web Components][] \- 使用 Web 组件构建的 Adobe Spectrum 设计语言实现。
 *  [UI5 Web Components][] \- 一组实现 SAP Fiori 设计指南的可重用 UI 元素。
 *  [UM Library Design System][] \- 密歇根大学图书馆设计系统。
 *  [Zooplus web components][] \- 一组实现 Z+ 商店风格指南的 web 组件。

#### 用例 ####

*  [我们如何选择使用 StencilJS Web 组件构建我们的设计系统][StencilJS Web]
 *  [搜索无捆绑包的 React 是如何引导我使用 Web 组件的][React _ Web]
 *  [Web Components 非常适合大公司的原因][Web Components]
 *  [Web 组件非常适合设计系统的 5 个原因][Web _ 5]
 *  [Web 组件：帮助为 Web 提供动力的秘诀][Web _ Web 2]
 *  [适用于企业的 Web 组件。第 1 部分：Salesforce、甲骨文、SAP][Web _ 1 _Salesforce_SAP]
 *  [适用于企业的 Web 组件。第 2 部分：Nuxeo、Ionic、Vaadin][Web _ 2 _Nuxeo_Ionic_Vaadin]
 *  [为什么我使用 Web 组件 - 我的用例][Web _ -]
 *  [@viljamis][viljamis]为什么我们使用[Web 组件][Web 28]
 *  [为什么我们使用 Web ][Web 29][Components][] @maxlynch

### 图书馆 ###

#### 基于类 ####

*  [Corpuscule][] \- 基于装饰器的小型 Web 组件框架。
 *  [DNA][] \- 渐进式 Web 组件库。
 *  [FAST Element][] \- 用于构建高性能、节省内存、符合标准的 Web 组件的轻量级库。
 *  [LitElement][] \- 用于创建快速、轻量级 Web 组件的简单基类。聚合物项目的一部分。
 *  [Lightning Web Components][] \- 超快速的企业级 Web 组件基础。
 *  [Omi][] \- 4kb JavaScript 中的下一代 Web 框架（Web 组件 + JSX + 代理 + 存储 + 路径更新）.
 *  [面板][Link 65]\- Web 组件 + 虚拟 DOM：强大 UI 的 Web 标准。
 *  [Polymer][] \- Polymer 项目作者的原始 Web 组件库。
 *  [Skate][] \- 专注于功能渲染管道和占用空间小的 Web 组件库。
 *  [slim.js][] \- 基于现代标准的快速且强大的前端微框架。
 *  [Stencil][] \- 用于生成 Web 组件的编译器。
 *  [Tonic][] \- 极简、稳定、审计友好的组件框架。

#### 功能性 ####

*  [atomico][] \- 使用函数和钩子创建基于 Web 组件的接口的小型库。
 *  [fuco][] \- 类似 React 的功能组件，但用于 Web 组件。
 *  [haunted][] \- 为 Web 组件实现的 React 的 Hooks API。
 *  [hybrids][] \- 用于创建具有简单和功能 API 的 Web 组件的 UI 库。
 *  [Solid][] \- 用于创建用户界面的声明性 JavaScript 库。

#### 集成 ####

*  [ember-custom-elements][] \- 使用自定义元素渲染 Ember 和 Glimmer 组件。
 *  [preact-custom-element][] \- 从 preact 组件生成/注册自定义元素。
 *  [@adobe/react-webcomponent][adobe_react-webcomponent] \- 在自定义元素中自动包装 React 组件。
 *  [react-shadow][] \- 在 React 中利用 Shadow DOM 以及样式封装的所有好处。
 *  [reactify-wc][] \- 使用具有 React 属性和功能的 Web 组件。
 *  [remount][] \- 使用自定义元素将 React 组件安装到 DOM。
 *  [@riotjs/custom-elements][riotjs_custom-elements] \- 使用 Riot.js 创建香草自定义元素的简单 API。

#### 基准 ####

*  [制作 Web 组件的所有方法][Web 30]
 *  [web-components-benchmark][] \- 使用各种示例对 Web 组件技术进行基准测试。
 *  [web-components-todo][] \- 相同的 todo 应用程序内置在不同的 Web 组件库中，用于基准测试。

### 构架 ###

#### 角 ####

*  [角元素概述][Link 66]
 *  [构建和使用 Angular 元素作为 Web 组件][Angular _ Web]
 *  [如何在 WebComponents 中使用 Angular ngModel 和 ngForms][WebComponents _ Angular ngModel _ ngForms]
 *  [在 Angular 中使用 Web 组件][Angular _ Web 1]
 *  [使用 Angular Ivy 的 Web 组件 6 个步骤][Angular Ivy _ Web _ 6]

#### 反应 ####

*  [使用自定义元素渲染 React 组件][React 1]
 *  [如何在 React 中使用 Web 组件][React _ Web 1]

#### 见过 ####

*  [使用 Vue CLI 3 创建和发布 Web 组件][Vue CLI 3 _ Web]
 *  [开始使用 Vue Web 组件][Vue Web]
 *  [将 Web 组件与您的 Vue.js 应用程序集成][Web _ Vue.js]
 *  [在 Vue 中使用 Web 组件][Vue _ Web]

#### 苗条 ####

*  [Svelte 自定义元素 API][Svelte _ API]
 *  [如何在 Svelte 中创建 Web 组件][Svelte _ Web]
 *  [Svelte Web 组件 — 5.4KB][Svelte Web _ _ 5.4KB]

### 生态系统 ###

#### 入门套件 ####

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

#### 工具 ####

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

### 图书 ###

*  [Web Components in Action][] \- Ben Farrell 所著的书籍，可在 Manning 早期发布计划中获得。
 *  [Web Component Essentials][] \- 由 Cory Rylan 撰写，Leanpub 提供早期预览版。

### 教程 ###

*  “**让我们构建 Web 组件！** ” by [Benny Powers][]
    
     *  [第 1 部分：标准][1 1]
     *  [第 2 部分：Polyfills][2 _Polyfills]
     *  [第 3 部分：原版组件][3]
     *  [第 4 部分：聚合物库][4]
     *  [第 5 部分：LitElement][5 _LitElement]
     *  [第 6 部分：胶水][6]
     *  [第 7 部分：混合动力车][7]
 *  “ **Web 组件：从零到英雄**”，[Pascal Schilp][]
    
     *  [第 1 部分：编写原始 Web 组件的介绍][1 _ Web]
     *  [第 2 部分：使用 lit-html 增强 Web 组件][2 _ lit-html _ Web]
     *  [第 3 部分：使用 LitElement 的 Web 组件英雄][3 _ LitElement _ Web]
 *  [Ilya Kantor][]的“**现代 JavaScript 教程**”
    
     *  [第 1 部分：从轨道高度][1 2]
     *  [第 2 部分：自定义元素][2 1]
     *  [第 3 部分：影子 DOM][3 _ DOM]
     *  [第 4 部分：模板元素][4 1]
     *  [第 5 部分：Shadow DOM 插槽、组合][5 _Shadow DOM]
     *  [第 6 部分：Shadow DOM 样式][6 _Shadow DOM]
     *  [第 7 部分：Shadow DOM 和事件][7 _Shadow DOM]
 *  [Web Fundamentals][]的“ **HowTo：组件**”
    
     *  [概述][Link 68]
     *  [<howto-checkbox>][howto-checkbox]
     *  [<howto-tabs>][howto-tabs]
     *  [<howto-tooltip>][howto-tooltip]
 *  [Caleb Williams的][Caleb Williams]**CSS 技巧**系列文章
    
     *  [第 1 部分：Web 组件简介][1 _Web]
     *  [第 2 部分：制作可重用的 HTML 模板][2 _ HTML]
     *  [第 3 部分：从头开始创建自定义元素][3 1]
     *  [第 4 部分：使用 Shadow DOM 封装样式和结构][4 _ Shadow DOM]
     *  [第 5 部分：Web 组件的高级工具][5 _Web]
 *  [Manfred Steyer的][Manfred Steyer]**Angular Elements**系列文章
    
     *  [第一部分：使用 Web 组件的四步动态仪表板][Web 31]
     *  [第二部分：惰性和外部 Web 组件][Web 32]
     *  [第三部分：没有 Zone.Js 的 Angular 元素][Zone.Js _ Angular]
     *  [第 IV 部分：在 Angular 元素中使用插槽进行内容投影 (>=7)][IV _ Angular _ _7]
     *  [第五部分：使用 CLI 构建 Angular 元素的选项][CLI _ Angular]

### 见解 ###

#### 播客 ####

*  [Code\[ish\]，第 38 集：使用 Web 组件构建][Code_ish_ 38 _ Web]
 *  [前端欢乐时光，第 62 集：Web 组件 - shadow DOM 的镜头][62 _Web _ - shadow DOM]
 *  [Labs Talk - 与 Peter Muessig 的 Web 组件][Labs Talk - _ Peter Muessig _ Web]
 *  [Real Talk JavaScript，第 7 集：使用 Rob Womald 自定义 Web 组件][Real Talk JavaScript_ 7 _ Rob Womald _ Web]
 *  [Real Talk JavaScript，第 101 集：使用原生 HTML 和 LitElement 回归基础][Real Talk JavaScript_ 101 _ HTML _ LitElement]

#### 演示文稿 ####

*  [Web Components 是 Web 开发的 Betamax 吗？][Web Components _ Web _ Betamax]通过[@lostinbrittany][lostinbrittany]
 *  @stefsull和[@bferrua][bferrua][设计标准][Link 69][系统][Link 70]
 *  [@salem\_cobalt][salem_cobalt][的可扩展设计系统][Link 71]的前端架构
 *  [lit-apollo：使用平台][lit-apollo]的数据驱动组件[@PowersBenny][PowersBenny]
 *  @Martine\_Dowden[掌握 Shadow ][Shadow][DOM][DOM 5]
 *  [使用 Web 组件对大型前端进行现代化][Web 33]改造[@samjulien][samjulien]
 *  [Shadow DOM：][Shadow DOM 4][@serhiikulykov][Serhii Kulykov]的人迹罕至的地方
 *  [@brianbouril][brianbouril]和[@danciupuliga][danciupuliga][使用 Web 组件构建与框架无关的 UI][Web _ UI]库
 *  [@LeonieWatson][LeonieWatson]的[Web 组件和 AOM][Web _ AOM]
 *  [@bashmish][bashmish]的[Web 组件和样式范围][Web 34]
 *  [Web 组件可以做到这一点？！][Web 35]通过[@vogloblinsky][vogloblinsky]
 *  [Web 组件：][Web 36][@webcomp\_dev][webcomp_dev]的介绍和最新技术

#### 会谈 ####

*  [更好的应用程序：将通用 UI 模式作为 Web 组件][UI _ Web]提供[@janmiksovsky][janmiksovsky]
 *  [自定义 Web 阴影元素，或其他任何东西……][Web 37]作者：[@aerotwist][aerotwist]
 *  [@justinfagnani][justinfagnani]为[Web 组件设计样式和主题][Web 38]
 *  [@diervo][diervo]的[企业级 Web 组件][Web 39]

### 使用指标 ###

*  [Chrome 平台状态：CustomElementRegistryDefine][Chrome _CustomElementRegistryDefine]
 *  [Chrome 平台状态：ElementAttachShadow][Chrome _ElementAttachShadow]
 *  [Chrome 平台状态：HTMLTemplateElement][Chrome _HTMLTemplateElement]

### 提案 ###

#### 表单相关的自定义元素 ####

*  [表单参与 API 解释][API]\- Google Chrome 团队的文档。
 *  [与表单相关的自定义元素][Link 72]\- Chrome 平台状态中的功能。
 *  [网络平台测试][Link 73]

#### 自定义状态伪类 ####

*  [闪烁：意图实施][Link 74]
 *  [ElementInternals的states属性和:state()伪类][ElementInternals_states_state]

#### 可构造的样式表对象 ####

*  [规范草案][Link 75]
 *  [网络平台测试][Link 76]
 *  [解说员][Link 77]
 *  [可构造样式表][Link 78]\- Chrome 平台状态中的功能。

### 各种各样的 ###

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

### 历史 ###

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

#### 2019 ####

*  [HTML slot 元素的历史][HTML slot]
 *  [2019 年 Web 组件：与 Web 组件相关的 Web 平台最激动人心的提案概述][2019 _ Web _ Web _ Web]

#### 2018 ####

*  [样式可访问性：Web 组件方法][Web 40]
 *  [Web 组件 101：Web 组件简介][Web _ 101_Web]
 *  [2018 年的 Web 组件][2018 _ Web]
 *  [Web 组件介绍：2018 年创建自定义 HTML 元素][Web _2018 _ HTML]

#### 2017 ####

*  [Web 组件：漫长的游戏][Web 41]
 *  [使用 otters 介绍 Web 组件][otters _ Web]
 *  [Web 组件的破灭承诺][Web 42]
 *  [关于 Web Components 的失信][Web Components 1]

#### 2016 ####

*  [引入自定义元素][Link 79]
 *  [自定义元素案例：第 1 部分][1 3]
 *  [自定义元素案例：第 2 部分][2 2]
 *  [揭开 Web 组件的神秘面纱][Web 43]
 *  [Shadow DOM v1 中的新增功能（通过示例）][Shadow DOM v1]
 *  [了解 Web 组件][Web 44]

#### 2015 ####

*  [介绍基于插槽的 Shadow DOM API][Shadow DOM API]
 *  [Web 组件及其在未来 Web 开发中的作用][Web _ Web 3]
 *  [Microsoft Edge 和 Web 组件][Microsoft Edge _ Web]
 *  [将组件化引入 Web：Web 组件概述][Web_Web]
 *  [Web 组件的状态][Web 45]

#### 2014 ####

*  [Web 组件的严肃指南][Web 46]
 *  [Mozilla 和 Web 组件：更新][Mozilla _ Web]
 *  [组件化 Web 的状态][Web 47]
 *  [构建可访问的披露按钮 - 使用 Web 组件][- _ Web]
 *  [Web Components 和你——要避免的危险][Web Components 2]
 *  [Web 的声明式、可组合的未来][Web 48]
 *  [Shadow DOM 日记][Shadow DOM 5]
 *  [自定义元素的详细介绍][Link 80]

#### 2013 ####

*  [性能和自定义元素][Link 81]
 *  [Web 组件指南][Web 49]
 *  [使用 HTML 模板元素创建可重用标记][HTML 3]
 *  [使用 Shadow DOM][Shadow DOM 6]
 *  [HTML 的新模板标签][HTML 4]

#### 2012 ####

*  [Shadow DOM 的基础知识][Shadow DOM 7]
 *  [关于 Web 组件 + ARIA 的注释][Web _ _ ARIA]
 *  [Web 组件简介][Web 50]

#### 2011 ####

*  [Web Components and Model Driven Views by Alex Russell][]
 *  [Shadow DOM 到底是什么？][Shadow DOM 8]

[fluidicon.png]: https://github.com/fluidicon.png
[GitHub - mateusortiz_webcomponents-the-right-way_ This is a guide intended to introduce to Web Components. Everyone can contribute here_This is a guide intended to introduce to Web Components. Everyone can contribute here_ - GitHub - mateusortiz_webcomponents-the-right-way_ This is a guide intended to introduce to Web Components. Everyone can contribute here_fluidicon.png_https_github.com_mateusortiz_webcomponents-the-right-way]: https://github.com/mateusortiz/webcomponents-the-right-way
[Web]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
[Link 1]: https://github.com/mateusortiz/webcomponents-the-right-way#introduction
[Link 2]: https://github.com/mateusortiz/webcomponents-the-right-way#standards
[Link 3]: https://github.com/mateusortiz/webcomponents-the-right-way#custom-elements
[DOM]: https://github.com/mateusortiz/webcomponents-the-right-way#shadow-dom
[HTML]: https://github.com/mateusortiz/webcomponents-the-right-way#html-templates
[CSS]: https://github.com/mateusortiz/webcomponents-the-right-way#css-shadow-parts
[Link 4]: https://github.com/mateusortiz/webcomponents-the-right-way#polyfills
[polyfill]: https://github.com/mateusortiz/webcomponents-the-right-way#custom-elements-polyfills
[polyfill 1]: https://github.com/mateusortiz/webcomponents-the-right-way#customized-built-in-elements-polyfills
[Shadow DOM]: https://github.com/mateusortiz/webcomponents-the-right-way#shadow-dom-shims
[HTML _ polyfills]: https://github.com/mateusortiz/webcomponents-the-right-way#html-templates-polyfills
[Link 5]: https://github.com/mateusortiz/webcomponents-the-right-way#guides
[Link 6]: https://github.com/mateusortiz/webcomponents-the-right-way#accessibility
[Link 7]: https://github.com/mateusortiz/webcomponents-the-right-way#best-practices
[Link 8]: https://github.com/mateusortiz/webcomponents-the-right-way#codelabs
[Link 9]: https://github.com/mateusortiz/webcomponents-the-right-way#examples
[Link 10]: https://github.com/mateusortiz/webcomponents-the-right-way#articles
[Link 11]: https://github.com/mateusortiz/webcomponents-the-right-way#architecture
[Link 12]: https://github.com/mateusortiz/webcomponents-the-right-way#interoperability
[Link 13]: https://github.com/mateusortiz/webcomponents-the-right-way#limitations
[Link 14]: https://github.com/mateusortiz/webcomponents-the-right-way#styling
[Link 15]: https://github.com/mateusortiz/webcomponents-the-right-way#real-world
[Link 16]: https://github.com/mateusortiz/webcomponents-the-right-way#case-studies
[Link 17]: https://github.com/mateusortiz/webcomponents-the-right-way#components
[Link 18]: https://github.com/mateusortiz/webcomponents-the-right-way#component-libraries
[Link 19]: https://github.com/mateusortiz/webcomponents-the-right-way#design-systems
[Link 20]: https://github.com/mateusortiz/webcomponents-the-right-way#use-cases
[Link 21]: https://github.com/mateusortiz/webcomponents-the-right-way#libraries
[Link 22]: https://github.com/mateusortiz/webcomponents-the-right-way#class-based
[Link 23]: https://github.com/mateusortiz/webcomponents-the-right-way#functional
[Link 24]: https://github.com/mateusortiz/webcomponents-the-right-way#integrations
[Link 25]: https://github.com/mateusortiz/webcomponents-the-right-way#benchmarks
[Link 26]: https://github.com/mateusortiz/webcomponents-the-right-way#frameworks
[Link 27]: https://github.com/mateusortiz/webcomponents-the-right-way#angular
[Link 28]: https://github.com/mateusortiz/webcomponents-the-right-way#react
[Link 29]: https://github.com/mateusortiz/webcomponents-the-right-way#vue
[Link 30]: https://github.com/mateusortiz/webcomponents-the-right-way#svelte
[Link 31]: https://github.com/mateusortiz/webcomponents-the-right-way#ecosystem
[Link 32]: https://github.com/mateusortiz/webcomponents-the-right-way#starter-kits
[Link 33]: https://github.com/mateusortiz/webcomponents-the-right-way#tools
[Link 34]: https://github.com/mateusortiz/webcomponents-the-right-way#books
[Link 35]: https://github.com/mateusortiz/webcomponents-the-right-way#tutorials
[Link 36]: https://github.com/mateusortiz/webcomponents-the-right-way#insights
[Link 37]: https://github.com/mateusortiz/webcomponents-the-right-way#podcasts
[Link 38]: https://github.com/mateusortiz/webcomponents-the-right-way#presentations
[Link 39]: https://github.com/mateusortiz/webcomponents-the-right-way#talks
[Link 40]: https://github.com/mateusortiz/webcomponents-the-right-way#usage-metrics
[Link 41]: https://github.com/mateusortiz/webcomponents-the-right-way#proposals
[Link 42]: https://github.com/mateusortiz/webcomponents-the-right-way#form-associated-custom-elements
[Link 43]: https://github.com/mateusortiz/webcomponents-the-right-way#constructable-stylesheet-objects
[Link 44]: https://github.com/mateusortiz/webcomponents-the-right-way#custom-state-pseudo-class
[Link 45]: https://github.com/mateusortiz/webcomponents-the-right-way#miscellaneous
[Link 46]: https://github.com/mateusortiz/webcomponents-the-right-way#history
[Link 47]: https://github.com/mateusortiz/webcomponents-the-right-way#who-to-follow
[Link 48]: https://github.com/mateusortiz/webcomponents-the-right-way#license
[Mateus Ortiz]: https://twitter.com/mteusortiz
[Serhii Kulykov]: https://twitter.com/serhiikulykov
[101]: https://nhswd.com/blog/web-components-101-what-are-web-components/
[Web 1]: https://developer.salesforce.com/blogs/2020/01/intro-to-web-components.html
[Shadow DOM _ NPM]: https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/
[Web 2]: https://hacks.mozilla.org/2018/11/the-power-of-web-components/
[HTML 1]: https://html.spec.whatwg.org/multipage/custom-elements.html
[React]: https://css-tricks.com/a-guide-to-custom-elements-for-react-developers/
[HTML 2]: https://github.com/shawnbot/custom-elements
[v1_ Web]: https://developers.google.com/web/fundamentals/web-components/customelements
[Link 49]: https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4
[MDN -]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
[Link 50]: https://github.com/web-platform-tests/wpt/tree/master/custom-elements
[DOM _ShadowRoot]: https://dom.spec.whatwg.org/#interface-shadowroot
[DOM 1]: https://dom.spec.whatwg.org/#shadow-trees
[MDN - _ DOM]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
[Shadow DOM 1]: https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af
[Shadow DOM 2]: https://github.com/praveenpuglia/shadow-dom-in-depth
[Shadow DOM v1_ Web]: https://developers.google.com/web/fundamentals/web-components/shadowdom
[Shadow DOM 3]: https://medium.com/front-end-hacking/the-rise-of-shadow-dom-84aa1f731e82
[Web 3]: https://coryrylan.com/blog/understanding-slot-updates-with-web-components
[DOM 2]: https://bitsofco.de/what-is-the-shadow-dom/
[Link 51]: https://github.com/web-platform-tests/wpt/tree/master/shadow-dom
[HTML _template]: https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
[MDN - _template]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
[MDN - 1]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
[Link 52]: https://github.com/web-platform-tests/wpt/tree/master/html/semantics/scripting-1/the-template-element
[W3C]: https://www.w3.org/TR/css-shadow-parts-1/
[CSS 1]: https://dev.to/webpadawan/css-shadow-parts-are-coming-mi5
[MDN - _part_CSS]: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
[MDN -part]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part
[part _ _theme_ _explainer]: https://meowni.ca/posts/part-theme-explainer/
[Link 53]: https://github.com/web-platform-tests/wpt/tree/master/css/css-shadow-parts
[webcomponents_custom-elements]: https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements
[document-register-element]: https://github.com/WebReflection/document-register-element
[corpuscule_custom-builtin-elements]: https://github.com/corpusculejs/custom-builtin-elements
[polyfill 2]: https://github.com/corpusculejs
[ungap_custom-elements-builtin -]: https://github.com/ungap/custom-elements-builtin
[ungap]: https://ungap.github.io/
[webcomponents_shadydom]: https://github.com/webcomponents/polyfills/tree/master/packages/shadydom
[webcomponents_shadycss]: https://github.com/webcomponents/polyfills/tree/master/packages/shadycss
[luck_synthetic-shadow -]: https://github.com/salesforce/lwc/blob/master/packages/@lwc/synthetic-shadow
[LWC]: https://lwc.dev/
[webcomponents_template]: https://github.com/webcomponents/polyfills/tree/master/packages/template
[ungap_import-node]: https://github.com/ungap/import-node
[Web 4]: https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
[Web 5]: https://www.sitepoint.com/accessible-web-components/
[Link 54]: https://robdodson.me/the-future-of-accessibility-for-custom-elements/
[Web 6]: https://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/
[Web _ _AOM]: https://www.24a11y.com/2019/web-components-and-the-aom/
[Web 7]: https://www.tpgi.com/web-components-punch-list/
[Web 8]: https://www.24a11y.com/2018/web-components-still-need-to-be-accessible/
[Link 55]: https://developers.google.com/web/fundamentals/web-components/best-practices
[Link 56]: https://open-wc.org/guides/developing-components/publishing/
[Web 9]: https://github.com/webcomponents/gold-standard/wiki
[Web 10]: https://w3ctag.github.io/webcomponents-design-guidelines/
[Web _ NPM]: https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/
[Web 11]: https://open-wc.org/
[LitElement _ Story Web]: https://dev.to/straversi/build-a-story-web-component-with-litelement-e59
[Web _ 2020]: https://medium.com/stories-from-upstatement/building-custom-elements-with-web-components-for-the-2020-elections-f767ff9e9c6a
[Vanilla JavaScript _ Web]: https://dev.to/aspittel/building-web-components-with-vanilla-javascript--jho
[Avatar Web]: https://marcoslooten.com/blog/creating-a-reusable-avatar-web-component/
[Stencil _ Web]: https://auth0.com/blog/creating-web-components-with-stencil/
[Web _ Lit]: https://codelabs.developers.google.com/codelabs/the-lit-path
[LitElement _ TypeScript]: https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript
[Web 12]: https://itnext.io/handling-data-with-web-components-9e7e4a452e6e
[WebComponents _ D3js]: https://towardsdatascience.com/how-to-use-d3js-with-webcomponents-a75ae4f980de
[Web 13]: https://sinhapiyush.hashnode.dev/introduction-to-storybook-for-web-components
[Vaadin Router_LitElement _ TypeScript]: https://labs.thisdot.co/blog/navigation-lifecycle-using-vaadin-router-litelement-and-typescript
[Web _Codelabs]: https://open-wc.org/guides/developing-components/codelabs/
[SVG _ Arduino _lit-element]: https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/
[LitElement _ TypeScript 1]: https://labs.thisdot.co/blog/routing-management-with-litelement
[Omi _ MVP _ Web]: https://dev.to/dntzhang/snake-eating-game-making-with-web-components-of-omi-and-mvp-architecture-206
[Web 14]: https://dev.to/open-wc/storybook-for-web-components-on-steroids-4h29
[Web 15]: https://dev.to/open-wc/testing-workflow-for-web-components-g73
[Web 16]: https://www.nexmo.com/blog/2020/05/20/web-components-tools-a-comparison
[generic-components]: https://github.com/thepassle/generic-components
[howto-components]: https://github.com/GoogleChromeLabs/howto-components
[open-wc]: https://open-wc.org/guides/developing-components/code-examples/
[vanilla-retro-js]: https://github.com/martine-dowden/vanilla-retro-js
[web-components-examples]: https://github.com/mdn/web-components-examples
[MicroFrontends]: https://itnext.io/a-deep-analysis-into-isomorphic-autonomous-cross-framework-usage-microfrontends-364271dc5fa9
[1]: https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-1/
[2]: https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-2/
[Web 17]: https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e
[Web _ API]: https://component.kitchen/blog/posts/hiding-internal-framework-methods-and-properties-from-web-component-apis
[Link 57]: https://medium.com/@WebReflection/how-to-deliver-custom-elements-702fae32d25c
[Web 18]: https://css-tricks.com/making-web-components-for-different-contexts/
[Link 58]: https://component.kitchen/blog/posts/supporting-both-automatic-and-manual-registration-of-custom-elements
[Web 19]: https://equinusocio.dev/blog/web-components-the-right-way/
[Link 59]: https://custom-elements-everywhere.com/
[Link 60]: https://robdodson.me/interoperable-custom-elements/
[JavaScript _ Web]: https://www.voorhoede.nl/nl/blog/javascript-frameworks-meet-web-components/
[Web 20]: https://lamplightdev.com/blog/2020/01/18/web-components-arent-a-framework-replacement-theyre-better-than-that/
[Web 21]: https://medium.com/@sergicontre/web-components-seamlessly-interoperable-82efd6989ca4
[polyfill_Web]: https://dev.to/webpadawan/beyond-the-polyfills-how-web-components-affect-us-today-3j0a
[DOM 3]: https://www.hjorthhansen.dev/shadow-dom-and-forms/
[Link 61]: https://www.hjorthhansen.dev/shadow-dom-form-participation/
[DOM 4]: https://www.hjorthhansen.dev/you-might-not-need-shadow-dom/
[Web 22]: https://nolanlawson.com/2021/01/03/options-for-styling-web-components/
[Web 23]: https://css-tricks.com/styling-a-web-component/
[CSS _ Shadow DOM]: https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/
[Web 24]: https://component.kitchen/blog/posts/styling-is-critical-to-web-component-reuse-but-may-prove-difficult-in-practice
[Web 25]: https://css-tricks.com/thinking-through-styling-options-for-web-components/
[Web _ CSS-in-JS]: https://css-tricks.com/web-standards-meet-user-land-using-css-in-js-to-style-custom-elements/
[Apple _ Web]: https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf
[Web _ Web]: https://dev.to/thatjoemoore/bringing-order-to-web-design-chaos--3fhb
[Microsoft _ FAST Web]: https://www.infoworld.com/article/3618410/get-moving-with-microsofts-fast-web-components.html
[GitHub _ Salesforce _ Web]: https://thenewstack.io/how-web-components-are-used-at-github-and-salesforce/
[GitHub _ Web]: https://github.blog/2021-05-04-how-we-use-web-components-at-github/
[Stencil.js]: https://medium.com/@Danetag/implementing-a-design-language-system-with-stencil-js-515432918eb5
[Link 62]: https://dev.to/thepassle/ing--web-components-aef
[ING _ Lion_ Web _ _ _ Thomas Allmer]: https://www.infoq.com/articles/ing-open-sources-lion-web-component/
[Web 26]: https://medium.com/samsung-internet-dev/lessons-learned-making-our-app-with-web-components-bf55379cfcda
[Web 27]: https://bitworking.org/news/2019/07/looking-back-on-five-years-of-web-components
[2020 _ Web]: https://dev.to/joe8bit/shipping-web-components-in-2020-2h54
[Firefox UI _ Web]: https://briangrinstead.com/blog/firefox-webcomponents/
[Web _ CSS]: https://about.gitlab.com/blog/2021/05/03/using-web-components-to-encapsulate-css-and-resolve-design-system-conflicts/
[GitHub _ Web _ - Web _ SF]: https://www.infoq.com/news/2020/08/web-components-sf-meetup-2020/
[Salesforce _ Web]: https://www.infoq.com/news/2020/03/web-components-salesforce-lwc/
[Web _ Web 1]: https://medium.com/@jarrodek/composable-applications-with-web-components-ebe5158387be
[web.dev _ _1_ Web]: https://web.dev/how-we-build-webdev-and-use-web-components/
[api-viewer]: https://github.com/web-padawan/api-viewer-element
[chess-board]: https://github.com/justinfagnani/chessboard-element
[css-doodle]: https://github.com/css-doodle/css-doodle
[dark-mode-toggle]: https://github.com/GoogleChromeLabs/dark-mode-toggle
[emoji-picker]: https://github.com/nolanlawson/emoji-picker-element
[fg-modal]: https://github.com/filamentgroup/fg-modal
[file-viewer]: https://github.com/avipunes/file-viewer
[json-viewer]: https://github.com/alenaksu/json-viewer
[lite-youtube]: https://github.com/paulirish/lite-youtube-embed
[midi-player]: https://github.com/cifkao/html-midi-player
[model-viewer]: https://github.com/google/model-viewer
[player-x]: https://github.com/playerxo/playerx
[progressive-image]: https://github.com/andreruffert/progressive-image-element
[range-slider]: https://github.com/andreruffert/range-slider-element
[rapi-doc]: https://github.com/mrin9/RapiDoc
[shader-doodle]: https://github.com/halvves/shader-doodle
[trix-editor]: https://github.com/basecamp/trix
[vime-player]: https://github.com/vime-js/vime
[web-vitals]: https://github.com/stefanjudis/web-vitals-element
[Web Vitals]: https://github.com/GoogleChrome/web-vitals
[AMP]: https://github.com/ampproject/amphtml
[Apollo Elements]: https://github.com/apollo-elements/apollo-elements
[AXA Pattern Library]: https://github.com/axa-ch/patterns-library
[Blackstone UI]: https://github.com/kjantzer/bui
[Blaze UI Atoms]: https://github.com/BlazeSoftware/atoms
[Brightspace UI]: https://github.com/BrightspaceUI/core
[Clever components]: https://github.com/CleverCloud/clever-components
[DataFormsJS]: https://github.com/dataformsjs/dataformsjs
[elements-sk]: https://github.com/google/elements-sk
[github-elements]: https://github.com/github/github-elements
[Elix]: https://github.com/elix/elix
[Link 63]: https://github.com/MozillaReality/immersive-custom-elements
[Iooxa]: https://github.com/iooxa/article
[Joomla UI]: https://github.com/joomla-projects/custom-elements
[Ketch.UP]: https://github.com/smeup/ketchup
[Lion Web Components]: https://github.com/ing-bank/lion
[LRNWebComponents]: https://github.com/elmsln/lrnwebcomponents/
[Lume]: https://github.com/lume/lume
[Microsoft Graph Toolkit]: https://github.com/microsoftgraph/microsoft-graph-toolkit
[Nightingale]: https://github.com/ebi-webcomponents/nightingale
[Nuxeo Elements]: https://github.com/nuxeo/nuxeo-elements
[Open Business Application Platform Web Components]: https://github.com/openbap/obap-elements
[Pixano Elements]: https://github.com/pixano/pixano-elements
[Shoelace]: https://github.com/shoelace-style/shoelace
[Smart Web Components]: https://github.com/HTMLElements/smart-webcomponents
[TEI Publisher Components]: https://github.com/eeditiones/tei-publisher-components
[Tradeshift Elements]: https://github.com/Tradeshift/elements
[Vaadin components]: https://github.com/vaadin/web-components
[Warp View]: https://github.com/senx/warpview
[Link 64]: https://github.com/wiredjs/wired-elements
[Wokwi Elements]: https://github.com/wokwi/wokwi-elements
[XWeather]: https://github.com/kherrick/x-weather
[Amber Components]: https://github.com/bitrockteam/amber-components
[Bolt Design System]: https://github.com/boltdesignsystem/bolt
[Calcite Components]: https://github.com/Esri/calcite-components
[Carbon Custom Elements]: https://github.com/carbon-design-system/carbon-custom-elements
[Chameleon Web Components]: https://github.com/MaritzSTL/chameleon
[Clarity Core Web Components]: https://github.com/vmware/clarity/tree/master/packages/core
[Crayons]: https://github.com/freshdesk/crayons
[FAST Components]: https://github.com/microsoft/fast/tree/master/packages/web-components/fast-components
[Fluent UI Web Components]: https://github.com/microsoft/fluentui/tree/master/packages/web-components
[GOV.UK Web Components]: https://github.com/tgreyuk/govuk-webcomponents
[Helix UI]: https://github.com/HelixDesignSystem/helix-ui
[Lyne]: https://github.com/lyne-design-system/lyne-components
[Material Web Components]: https://github.com/material-components/material-components-web-components
[_ NUDE Elements]: https://github.com/tenphi/numl
[PatternFly Elements]: https://github.com/patternfly/patternfly-elements
[Pearson Web Components]: https://github.com/pearson-ux/web-components
[Spectrum Web Components]: https://github.com/adobe/spectrum-web-components
[UI5 Web Components]: https://github.com/SAP/ui5-webcomponents
[UM Library Design System]: https://github.com/mlibrary/design-system
[Zooplus web components]: https://github.com/zooplus/zoo-web-components
[StencilJS Web]: https://medium.com/8451/how-we-chose-to-build-our-design-system-using-stenciljs-web-components-4878c36743c5
[React _ Web]: https://www.bryanbraun.com/2020/08/31/how-searching-for-a-bundle-free-react-led-me-to-web-components/
[Web Components]: https://medium.com/@sergicontre/reasons-web-components-are-perfect-for-a-big-company-28790d712ad5
[Web _ 5]: https://ionicframework.com/blog/5-reasons-web-components-are-perfect-for-design-systems/
[Web _ Web 2]: https://web.dev/web-components-io-2019/
[Web _ 1 _Salesforce_SAP]: https://dev.to/webpadawan/web-components-for-enterprise-part-1-salesforce-oracle-sap-e70
[Web _ 2 _Nuxeo_Ionic_Vaadin]: https://dev.to/webpadawan/web-components-for-enterprise-part-2-nuxeo-ionic-vaadin-22l7
[Web _ -]: https://dev.to/shihn/why-i-use-web-components-my-use-cases-1nip
[viljamis]: https://twitter.com/viljamis
[Web 28]: https://viljamis.com/2019/why-we-use-web-components/
[Web 29]: https://dev.to/ionic/why-we-use-web-components-2c1i
[Components]: https://twitter.com/maxlynch
[Corpuscule]: https://github.com/corpusculejs/corpuscule
[DNA]: https://github.com/chialab/dna
[FAST Element]: https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element
[LitElement]: https://lit-element.polymer-project.org/
[Lightning Web Components]: https://github.com/salesforce/lwc
[Omi]: https://github.com/Tencent/omi
[Link 65]: https://github.com/mixpanel/panel
[Polymer]: https://polymer-library.polymer-project.org/
[Skate]: https://github.com/skatejs/skatejs
[slim.js]: https://github.com/slimjs/slim.js
[Stencil]: https://github.com/ionic-team/stencil
[Tonic]: https://github.com/optoolco/tonic
[atomico]: https://github.com/atomicojs/atomico
[fuco]: https://github.com/wtnbass/fuco
[haunted]: https://github.com/matthewp/haunted
[hybrids]: https://github.com/hybridsjs/hybrids
[Solid]: https://github.com/ryansolid/solid
[ember-custom-elements]: https://github.com/Ravenstine/ember-custom-elements
[preact-custom-element]: https://github.com/preactjs/preact-custom-element
[adobe_react-webcomponent]: https://github.com/adobe/react-webcomponent
[react-shadow]: https://github.com/Wildhoney/ReactShadow
[reactify-wc]: https://github.com/BBKolton/reactify-wc
[remount]: https://github.com/rstacruz/remount
[riotjs_custom-elements]: https://github.com/riot/custom-elements
[Web 30]: https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/
[web-components-benchmark]: https://vogloblinsky.github.io/web-components-benchmark/
[web-components-todo]: https://wc-todo.firebaseapp.com/
[Link 66]: https://angular.io/guide/elements
[Angular _ Web]: https://indepth.dev/building-and-bundling-web-components/
[WebComponents _ Angular ngModel _ ngForms]: https://itnext.io/how-to-use-angular-ngmodel-and-ngforms-with-webcomponents-802bd9e1d3d7
[Angular _ Web 1]: https://coryrylan.com/blog/using-web-components-in-angular
[Angular Ivy _ Web _ 6]: https://www.softwarearchitekt.at/post/2019/05/18/web-components-custom-elements-with-angular-ivy-in-6-steps.aspx
[React 1]: https://guillaumebriday.fr/rendering-react-components-with-custom-elements
[React _ Web 1]: https://www.robinwieruch.de/react-web-components
[Vue CLI 3 _ Web]: https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/
[Vue Web]: https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200
[Web _ Vue.js]: https://alligator.io/vuejs/vue-integrate-web-components/
[Vue _ Web]: https://coryrylan.com/blog/using-web-components-in-vue
[Svelte _ API]: https://svelte.dev/docs#Custom_element_API
[Svelte _ Web]: https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j
[Svelte Web _ _ 5.4KB]: https://itnext.io/svelte-web-component-5-4kb-4afe46590d99
[Create Open Web Components]: https://open-wc.org/docs/development/generator/
[custom-element-boilerplate]: https://github.com/github/custom-element-boilerplate
[hello-web-components]: https://github.com/fernandopasik/hello-web-components
[nutmeg]: https://github.com/abraham/nutmeg
[Backlight]: https://backlight.dev/
[Link 67]: https://github.com/open-wc/locator
[query-selector-shadow-dom]: https://github.com/Georgegriff/query-selector-shadow-dom
[shadow-automation-selenium]: https://github.com/sukgu/shadow-automation-selenium
[shadow-dom-utils]: https://github.com/43081j/shadow-dom-utils
[storybook_web-components]: https://www.npmjs.com/package/@storybook/web-components
[webcomponents.dev]: https://webcomponents.dev/
[web-component-analyzer]: https://github.com/runem/web-component-analyzer
[Web Components Codemods]: https://github.com/kcmr/web-components-codemods
[Web Components in Action]: https://www.manning.com/books/web-components-in-action
[Web Component Essentials]: https://leanpub.com/web-component-essentials
[Benny Powers]: https://github.com/bennypowers
[1 1]: https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85
[2 _Polyfills]: https://dev.to/bennypowers/lets-build-web-components-part-2-the-polyfills-dkh
[3]: https://dev.to/bennypowers/lets-build-web-components-part-3-vanilla-components-4on3
[4]: https://dev.to/bennypowers/lets-build-web-components-part-4-polymer-library-4dk2
[5 _LitElement]: https://dev.to/bennypowers/lets-build-web-components-part-5-litelement-906
[6]: https://dev.to/bennypowers/lets-build-web-components-part-6-gluon-27ll
[7]: https://dev.to/bennypowers/lets-build-web-components-part-7-hybrids-187l
[Pascal Schilp]: https://github.com/thepassle
[1 _ Web]: https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m
[2 _ lit-html _ Web]: https://dev.to/thepassle/web-components-from-zero-to-hero-part-two-38p4
[3 _ LitElement _ Web]: https://dev.to/thepassle/web-components-from-zero-to-hero-part-three-3c5h
[Ilya Kantor]: https://github.com/iliakan
[1 2]: https://javascript.info/webcomponents-intro
[2 1]: https://javascript.info/custom-elements
[3 _ DOM]: https://javascript.info/shadow-dom
[4 1]: https://javascript.info/template-element
[5 _Shadow DOM]: https://javascript.info/slots-composition
[6 _Shadow DOM]: https://javascript.info/shadow-dom-style
[7 _Shadow DOM]: https://javascript.info/shadow-dom-events
[Web Fundamentals]: https://developers.google.com/web/fundamentals/
[Link 68]: https://developers.google.com/web/fundamentals/web-components/examples
[howto-checkbox]: https://developers.google.com/web/fundamentals/web-components/examples/howto-checkbox
[howto-tabs]: https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs
[howto-tooltip]: https://developers.google.com/web/fundamentals/web-components/examples/howto-tooltip
[Caleb Williams]: https://css-tricks.com/author/calebdwilliams/
[1 _Web]: https://css-tricks.com/an-introduction-to-web-components/
[2 _ HTML]: https://css-tricks.com/crafting-reusable-html-templates/
[3 1]: https://css-tricks.com/creating-a-custom-element-from-scratch
[4 _ Shadow DOM]: https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/
[5 _Web]: https://css-tricks.com/advanced-tooling-for-web-components/
[Manfred Steyer]: https://www.angulararchitects.io/about/
[Web 31]: https://www.angulararchitects.io/aktuelles/angular-elements-part-i/
[Web 32]: https://www.angulararchitects.io/aktuelles/angular-elements-part-ii/
[Zone.Js _ Angular]: https://www.angulararchitects.io/aktuelles/angular-elements-part-iii/
[IV _ Angular _ _7]: https://www.angulararchitects.io/aktuelles/content-projection-with-slots-in-angular-elements-7/
[CLI _ Angular]: https://www.angulararchitects.io/aktuelles/your-options-for-building-angular-elements/
[Code_ish_ 38 _ Web]: https://www.heroku.com/podcasts/codeish/38-building-with-web-components
[62 _Web _ - shadow DOM]: https://frontendhappyhour.com/episodes/web-components-shots-of-shadow-dom/
[Labs Talk - _ Peter Muessig _ Web]: https://labstalk.buzzsprout.com/993481/3932975-web-components-with-peter-muessig
[Real Talk JavaScript_ 7 _ Rob Womald _ Web]: https://realtalkjavascript.simplecast.fm/eaf3db9e
[Real Talk JavaScript_ 101 _ HTML _ LitElement]: https://realtalkjavascript.simplecast.com/episodes/episode-101-back-to-basics-with-native-html-and-litelement
[Web Components _ Web _ Betamax]: https://noti.st/lostinbrittany/EjUZyd/are-web-components-the-betamax-of-web-development
[lostinbrittany]: https://twitter.com/lostinbrittany
[bferrua]: https://twitter.com/stefsull
[Link 69]: https://drive.google.com/file/d/1ALFiWOFU0UAGUpaZPMIVnoADs9_REtL5/view
[Link 70]: https://twitter.com/bferrua
[salem_cobalt]: https://twitter.com/salem_cobalt
[Link 71]: https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components
[lit-apollo]: https://apolloelements.dev/using-lit-apollo/
[PowersBenny]: https://twitter.com/PowersBenny
[Shadow]: https://martine-dowden.github.io/portfolio/presentation/mastering-shadow-dom
[DOM 5]: https://twitter.com/Martine_Dowden
[Web 33]: https://speakerdeck.com/samjulien/modernizing-large-frontends-with-web-components
[samjulien]: https://twitter.com/samjulien
[Shadow DOM 4]: https://docs.google.com/presentation/d/1wi74YiTLtLSfgjyccKm5LxYp9k8aeJda0AekWV5mqJI/edit?usp=sharing
[brianbouril]: https://twitter.com/brianbouril
[danciupuliga]: https://twitter.com/danciupuliga
[Web _ UI]: https://gotochgo.com/2019/sessions/866/using-web-components-to-build-a-framework-agnostic-ui-library
[LeonieWatson]: https://twitter.com/LeonieWatson
[Web _ AOM]: https://decks.tink.uk/2019/jsconf/index.html
[bashmish]: https://twitter.com/bashmish
[Web 34]: https://www.dropbox.com/s/wdh9uufjui5htll/Web-Components-and-Styles-Scoping-by-bashmish-FrontMania-2018.pdf
[Web 35]: https://slides.com/vogloblinsky/web-components-can-do-that
[vogloblinsky]: https://twitter.com/vogloblinsky
[Web 36]: https://webcomponents.dev/blog/web-components-slides/
[webcomp_dev]: https://twitter.com/webcomp_dev
[UI _ Web]: https://youtu.be/mtHf7crZZIQ
[janmiksovsky]: https://twitter.com/janmiksovsky
[Web 37]: https://vimeo.com/364370506
[aerotwist]: https://twitter.com/aerotwist
[justinfagnani]: https://twitter.com/justinfagnani
[Web 38]: https://youtu.be/FM7ROEVPA4k
[diervo]: https://twitter.com/diervo
[Web 39]: https://youtu.be/iFp-P2UJT_Y
[Chrome _CustomElementRegistryDefine]: https://chromestatus.com/metrics/feature/timeline/popularity/1689
[Chrome _ElementAttachShadow]: https://chromestatus.com/metrics/feature/timeline/popularity/804
[Chrome _HTMLTemplateElement]: https://chromestatus.com/metrics/feature/timeline/popularity/2769
[API]: https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?usp=sharing
[Link 72]: https://www.chromestatus.com/features/4708990554472448
[Link 73]: https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated
[Link 74]: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/CApU9QIu3TM
[ElementInternals_states_state]: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/custom-states-and-state-pseudo-class.md
[Link 75]: https://wicg.github.io/construct-stylesheets/
[Link 76]: https://github.com/web-platform-tests/wpt/blob/master/css/cssom/CSSStyleSheet-constructable.html
[Link 77]: https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md
[Link 78]: https://www.chromestatus.com/feature/5394843094220800
[bruck]: https://github.com/Heydon/bruck
[Vaadin Directory]: https://vaadin.com/directory
[webcomponents.org]: http://webcomponents.org/
[HTML slot]: https://component.kitchen/blog/posts/a-history-of-the-html-slot-element
[2019 _ Web _ Web _ Web]: https://scotch.io/bar-talk/an-overview-of-the-most-exciting-proposals-for-the-web-platform-related-to-web-components
[Web 40]: https://medium.com/@cfscorreia/styling-accessibility-a-web-components-approach-dc2aa8123eb2
[Web _ 101_Web]: https://www.telerik.com/blogs/web-components-101-an-introduction-to-web-components
[2018 _ Web]: https://www.sitepen.com/blog/2018/07/06/web-components-in-2018/
[Web _2018 _ HTML]: https://www.grapecity.com/en/blogs/web-components-introduction-creating-custom-html-elements-2018
[Web 41]: https://infrequently.org/2017/10/web-components-the-long-game/
[otters _ Web]: https://meowni.ca/posts/web-components-with-otters/
[Web 42]: https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/
[Web Components 1]: http://robdodson.me/regarding-the-broken-promise-of-web-components/
[Link 79]: https://webkit.org/blog/7027/introducing-custom-elements/
[1 3]: https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439
[2 2]: https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133
[Web 43]: http://www.backalleycoder.com/2016/08/26/demythstifying-web-components/
[Shadow DOM v1]: http://hayato.io/2016/shadowdomv1/
[Web 44]: https://medium.com/the-ui-files/understanding-web-components-d051baa66019
[Shadow DOM API]: https://webkit.org/blog/4096/introducing-shadow-dom-api/
[Web _ Web 3]: http://kaytcat.github.io/web-components/
[Microsoft Edge _ Web]: https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/
[Web_Web]: https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/
[Web 45]: https://hacks.mozilla.org/2015/06/the-state-of-web-components/
[Web 46]: http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/
[Mozilla _ Web]: https://hacks.mozilla.org/2014/12/mozilla-and-web-components/
[Web 47]: https://www.leggetter.co.uk/2014/08/06/state-componentised-web.html
[- _ Web]: https://developer.paciellogroup.com/blog/2014/06/accessible-disclosure-button-using-web-components/
[Web Components 2]: https://christianheilmann.com/2014/04/18/web-components-and-you-dangers-to-avoid/
[Web 48]: https://addyosmani.com/blog/the-webs-declarative-composable-future/
[Shadow DOM 5]: https://gist.github.com/dglazkov/efd2deec54f65aa86f2e
[Link 80]: https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/
[Link 81]: https://www.stevesouders.com/blog/2013/11/26/performance-and-custom-elements/
[Web 49]: https://css-tricks.com/modular-future-web-components/
[HTML 3]: https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element
[Shadow DOM 6]: https://blog.teamtreehouse.com/working-with-shadow-dom
[HTML 4]: https://www.html5rocks.com/en/tutorials/webcomponents/template/
[Shadow DOM 7]: https://www.sitepoint.com/the-basics-of-the-shadow-dom/
[Web _ _ ARIA]: https://developer.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/
[Web 50]: https://www.w3.org/TR/2012/WD-components-intro-20120522/
[Web Components and Model Driven Views by Alex Russell]: https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell
[Shadow DOM 8]: https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/