

Web Components

Web Components the Right Way

>精选的Web组件资源精选列表.

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

> Web Components的正确方法是由爱创造 Mateus Ortiz 并由 Serhii Kulykov

Specifications

Standards

-自定义元素为作者提供了一种构建自己的功能齐全的DOM元素的方法. - HTML Living Standard - DOM Living Standard - web-platform-tests - Chrome Platform Status metrics

- Shadow DOM 描述了一种将多个DOM树合并为一个层次结构以及这些树如何在文档中相互交互的方法，从而可以更好地构成DOM. - DOM Living Standard，第4.2.2节：影子树 - DOM Living Standard，第4.8节：接口ShadowRoot - web-platform-tests - Chrome Platform Status metrics

-<template>元素用于声明HTML片段，这些片段可以通过脚本克隆并插入文档中. - HTML Living Standard - Chrome Platform Status metrics

Proposals

CSS Shadow Parts

• W3C First Public Working Draft
• web-platform-tests
• Explainer: CSS Shadow ::part and ::theme
• ::part and ::theme pseudo elements on shadow hosts -Chrome平台状态中的功能.
• Mozilla issue: Implement CSS Shadow Parts
• WebKit issue: Add the support for the CSS shadow parts

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平台状态中的功能.

Polyfills

@webcomponents

下面的填充料由Polymer团队维护.

• @webcomponents/custom-elements -HTML自定义元素v1的Polyfill.
• @webcomponents/shadydom -ShadowDOM v1匀场.
• @webcomponents/shadycss -ShadowDOM样式封装垫片.
• @webcomponents/template -最小的polyfill用于<template>.

@ungap

下面的填充填充物由 ungap project.

• @ungap/custom-elements-builtin -用于自定义元素内置的polyfill扩展.

Articles

Introduction

• The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
• The Power of Web Components
• The Case for Web Components
• Styling a Web Component
• Web Components 101: An Introduction to Web Components
• Web Components in 2018
• Web Components Introduction: Creating Custom HTML Elements in 2018
• Web Components in 2019: An Overview of the Most Exciting Proposals for the Web Platform Related to Web Components

Custom Elements

• Custom Elements v1: Reusable Web Components
• Custom Elements Everywhere
• All about HTML Custom Elements
• Introducing Custom Elements (WebKit)
• The Case for Custom Elements: Part 1
• The Case for Custom Elements: Part 2
• Using Custom Elements (MDN)
• A Guide to Custom Elements for React Developers

Shadow DOM

• Shadow DOM v1: Self-Contained Web Components
• What is the Shadow DOM?
• The Rise of Shadow DOM
• Shadow DOM in depth
• What's New in Shadow DOM v1 (by examples)
• Introducing Slot-Based Shadow DOM API (WebKit)
• Using Shadow DOM (MDN)
• Open vs. Closed Shadow DOM

HTML Templates

• <template>: The Content Template element
• Using templates and slots (MDN)

Best Practices

• Custom Element Best Practices
• Gold Standard Checklist for Web Components
• Guidelines for creating web platform compatible components
• HowTo: Components
• Open Web Components Recommendations

Interoperability

• Custom Elements That Work Anywhere
• JavaScript frameworks, meet Web Components
• Web Components: Seamlessly interoperable

Accessibility

• Styling Accessibility: A Web Components Approach
• The future of accessibility for custom elements
• Web components still need to be accessible

Use Cases

• Bringing Order to Web Design Chaos (with Web Components)
• ING ❤ Web Components
• Lessons Learned, making our app with Web Components
• Making Web Components Work
• Micro Frontends — extending the microservice idea to frontend development
• Web Components — the right way
• Reasons Web Components are perfect for a big company
• Why we use Web Components

Libraries

Class Based

• Corpuscule -基于装饰器的小型Web组件框架.
• LitElement -用于创建快速，轻量级Web组件的简单基类. 聚合物项目的一部分.
• Lightning Web Components -快速的企业级Web组件基础.
• Omi -4kb JavaScript的下一代Web框架（Web组件+ JSX +代理+存储+路径更新）.
• Polymer -Polymer Project作者提供的原始Web组件库.
• readymade -用于使用装饰器开发Web组件的JavaScript微库.
• Skate -专注于功能渲染管道和较小占用空间的Web组件库.
• slim.js -基于现代标准的快速，强大的前端微框架.
• Smart Custom Element -用于使用简单API创建自定义元素的UI库.

Functional

• atomico -用于使用功能和挂钩基于Web组件创建界面的小型库.
• functional-web-component -功能组件，如React，但用于Web组件.
• haunted -针对Web组件实现的React的Hooks API.
• hybrids -用于使用简单实用的API创建Web组件的UI库.
• reLift-HTML -小型（3kb）视图库，可用于创建Web组件并使HTML页面具有响应性.
• osagai -用于以功能方式创建Web组件的微型库.
• Switzerland -允许通过中间件功能以功能方式创建Web组件的库.
• ullr -用于通过功能编程来构建Web组件的库.

Compilers

• Stencil -生成Web组件的编译器.
• Svelte -控制论增强的Web应用程序（可以选择生成Web组件）.

Other

• custom-element-ts -使用Typescript创建本机自定义元素，而不使用任何第三方库.
• preact-custom-element -从预设组件生成/注册自定义元素.
• remount -使用自定义元素将React组件安装到DOM.
• @riotjs/custom-elements -使用Riot.js创建香草自定义元素的简单API.

Component Libraries

• Amber Components -琥珀色设计系统的Web组件实现.
• AMP HTML -Web组件库，用于构建以可靠，快速的性能呈现的网页.
• Bronconents -使用Lit-Element构建的现代Web组件.
• Carbon Custom Elements -使用Web组件构建的Carbon设计系统的实验变体.
• Clever components -由Clever Cloud制作的Web组件集合.
• Elix -用于通用用户界面模式的高质量，可定制的Web组件.
• LRNWebComponents -ELMS：LN为任何项目生产了Web组件.
• Material Web Components -将材料设计实现为Web组件.
• Microsoft Graph Toolkit -Microsoft Graph的Web组件集合.
• PatternFly Elements -灵活，轻量级的Web组件以及构建它们的工具的集合.
• UI5 Web Components -组件库在本地API的基础上提供了企业风味的糖.
• Vaadin components -用于构建业务Web应用程序的不断发展的高质量Web组件集.
• Wired Elements - Set of common UI elements with a hand-drawn, sketchy look.

Frameworks

Angular

• Angular Elements Overview
• Angular Elements, Part I: A Dynamic Dashboard In Four Steps With Web Components
• Angular Elements, Part II: Lazy And External Web Components
• Angular Elements, Part III: Angular Elements Without Zone.Js
• Angular Elements, Part IV: Content Projection with Slots in Angular Elements (>=7)
• Angular Elements, Part V: Your Options For Building Angular Elements With The CLI
• Building Custom Elements / Web Components with Angular 6
• Web Components With Angular Ivy In 6 Steps

Vue

• Create & Publish Web Components With Vue CLI 3
• Get started with Vue web components

Ember

• ember-shadow-dom

Aurelia

• Aurelia Web Components plugin

Tools

• Cypress Daywalker -赛普拉斯的Web组件和Shadow DOM支持.
• web-component-analyzer -用于分析Web组件并发出文档/诊断信息的CLI.

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

-“ 网络组件：从零到英雄” 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

- 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

Podcasts

• Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM
• Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald

Benchmarks

• web-components-benchmark -带有各种示例的基准Web组件技术.
• web-components-todo -出于不同基准目的，在不同的Web组件库中构建了相同的todo应用程序.

Miscellaneous

• bruck -使用Web组件和Houdini Paint API构建的原型系统.
• Vaadin Directory -发布，讨论和评估Web组件
• webcomponents.dev -您的Web组件工作室.
• webcomponents.org -讨论和共享Web组件.
• webcomponents.news -展示Web组件的文章，教程，微库和网站的集合.
• web-components-examples -与MDN Web组件文档相关的一系列Web组件示例.

History

以下文章代表了Web组件规范在实现标准化方面的悠久历史. 其中一些参考了早期的所谓的“ v0” Shadow DOM和“自定义元素”规范，而放弃了“ HTML导入”规范. 这些材料仅出于历史原因在这里，它们按年份分组并按时间顺序列出.

2017

• Web Components: The Long Game
• The broken promise of Web Components
• Regarding the broken promise of Web Components

2016

• Demythstifying Web Components
• Understanding Web Components

2015

• 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
• The state of Web Components

2014

• A No-Nonsense Guide to Web Components
• Mozilla and Web Components: Update
• The State of the Componentised Web
• Web Components and you – dangers to avoid
• The Web's Declarative, Composable Future

2013

• A Guide to Web Components

2012

• Notes on Web Components + ARIA
• 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
贾斯汀·法格纳尼（Justin Fagnani）	威廉·萨尔米宁	扬·米科索夫斯基	谢里·库里科夫（Serhii Kulykov）

License

版权所有2014-2018，保留所有权利.

根据以下方式许可的代码： MIT license

@作者Mateus Ortiz mteusortiz@gmail.com