

Web Components

Web Components the Right Way

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

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

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

Introduction

• 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

Polyfills

Custom Elements polyfills

• @webcomponents/custom-elements -由Polymer团队提供的Custom Elements polyfill.
• document-register-element -Andrea Giammarchi制作的Custom Elements 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 by LWC.

HTML Templates polyfills

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

Guides

Accessibility

• Accessibility for Web Components
• How to Make Accessible Web Components — a Brief Guide
• 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 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组件的集合.
• open-wc code examples -收集用于开发Web组件的最佳实践和设计模式.
• vanilla-retro-js -不推荐使用HTML的Vanilla JS UI组件库.
• web-components-examples -与MDN Web组件文档相关的一系列Web组件示例.

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

• Options for styling web components
• Styling a Web Component
• Styling in the Shadow DOM With CSS Shadow Parts
• Styling is critical to web component reuse, but may prove difficult in practice
• Thinking Through Styling Options for Web Components
• 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
• Making Web Components Work
• 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> -独立的国际象棋棋盘Web组件.
• <css-doodle> -用于使用CSS绘制图案的Web组件.
• <dark-mode-toggle> -允许创建暗模式切换或切换的自定义元素.
• <emoji-picker> -轻巧的表情符号选择器，作为Web组件分发.
• <fg-modal> -可访问的模式对话框Web组件.
• <file-viewer> - Web component built with Svelte to view files.
• <json-viewer> -Web组件，以树状视图可视化JSON数据.
• <lite-youtube> -精简版YouTube嵌入了视觉效果.
• <midi-player> -MIDI文件播放器和可视化器Web组件.
• <model-viewer> -用于渲染交互式3D模型的Web组件.
• <player-x> -媒体播放器Web组件.
• <progressive-image> -自定义元素，以逐步增强图像占位符.
• <range-slider> -具有键盘支持的可访问范围滑块自定义元素.
• <rapi-doc> -用于根据OpenAPI规范创建文档的Web组件.
• <shader-doodle> -用于编写和渲染着色器的Web组件.
• <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 - Web components for creating interfaces by Blackstone Publishing.
• Blaze UI Atoms -由Blaze CSS提供支持的Web组件集.
• Brightspace UI core -收集用于构建Brightspace应用程序的Web组件.
• Clever components -由Clever Cloud制作的Web组件的集合.
• DataFormsJS -用于SPA路由，显示来自Web服务的数据等的独立组件.
• elements-sk -用于“点菜”网站开发的自定义元素的集合.
• github-elements -GitHub的Web组件集合.
• Elix -用于常见用户界面模式的高质量，可定制的Web组件.
• Immersive Custom Elements -一组用于嵌入沉浸式（VR＆AR）内容的Web组件.
• Iooxa -用于交互式科学写作，反应性文档和可解释性说明的Web组件.
• Joomla UI custom elements -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组件.
• Wired Elements -手绘，粗略外观的一组通用UI元素.
• Wokwi Elements -用于Arduino和各种电子零件的Web组件.
• XWeather -收集实施OpenWeatherMap API的部分的Web组件.

Design Systems

• Amber Components -琥珀色设计系统的Web组件实现.
• Bolt Design System -由Twig和Web组件支持的UI组件，可重复使用的视觉样式和工具.
• Calcite Components -用于Esri的Calcite设计框架的共享Web组件.
• Carbon Custom Elements -Web组件顶部的Carbon Design System变体.
• 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 Components -Lyne设计系统的构建块基于Web组件.
• Material Web Components -将材料设计实现为Web组件.
• NuML | NUDE Elements -基于Web组件和运行时CSS生成的HTML框架和设计系统.
• PatternFly Elements -基于统一设计套件的灵活轻量级Web组件集合.
• Pearson Web Components -实施Gravity设计系统的Pearson的共享组件库.
• Spectrum Web Components -使用Web组件构建的Adobe Spectrum设计语言实现.
• UI5 Web Components -实施SAP Fiori设计准则的可重用UI元素集.
• U-M Library Design System -密歇根大学图书馆设计系统.
• Zooplus web components -实现Z +商店样式指南的一组Web组件.

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

• Corpuscule -基于装饰器的小型Web组件框架.
• DNA -渐进式Web组件库.
• FAST Element -轻量级库，用于构建高性能，内存高效，符合标准的Web组件.
• LitElement -用于创建快速，轻量级Web组件的简单基类. 聚合物项目的一部分.
• Lightning Web Components -快速的企业级Web组件基础.
• Omi -4kb JavaScript的下一代Web框架（Web组件+ JSX +代理+存储+路径更新）.
• Panel -Web组件+虚拟DOM：功能强大的UI的Web标准.
• Polymer -由Polymer Project作者编写的原始Web组件库.
• Skate -Web组件库专注于功能渲染管线和较小的占用空间.
• slim.js -基于现代标准的快速，强大的前端微框架.
• Stencil -用于生成Web组件的编译器.
• Tonic -极简，稳定，易于审核的组件框架.

Functional

• atomico -用于使用功能和挂钩基于Web组件创建界面的小型库.
• fuco -功能组件，如React，但用于Web组件.
• haunted -针对Web组件实现的React的Hooks API.
• hybrids -用于使用简单实用的API创建Web组件的UI库.
• Solid -用于创建用户界面的声明性JavaScript库.

Integrations

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

Benchmarks

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

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

• Rendering React Components With Custom Elements
• How to use Web Components in React

Vue

• Create & Publish Web Components With Vue CLI 3
• Get started with Vue web components
• Integrate Web Components with Your Vue.js App
• 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世界Web组件.
• nutmeg -用少许香料构建，测试和发布香草Web组件.

Tools

• 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 -用于分析Web组件并发出文档/诊断信息的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

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

-“ 方法：组件”的作者 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组件构建]（https://www.heroku.com/podcasts/codeish/38-building-with-web-components） - 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 -讨论和共享Web组件.

History

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

2019

• A history of the HTML slot element
• Web Components in 2019: An Overview of the Most Exciting Proposals for the Web Platform Related to Web Components

2018

• Styling Accessibility: A Web Components Approach
• Web Components 101: An Introduction to Web Components
• Web Components in 2018
• Web Components Introduction: Creating Custom HTML Elements in 2018

2017

• Web Components: The Long Game
• An intro to web components with otters
• The broken promise of Web Components
• Regarding the broken promise of Web Components

2016

• Introducing Custom Elements
• The Case for Custom Elements: Part 1
• The Case for Custom Elements: Part 2
• Demythstifying Web Components
• What's New in Shadow DOM v1 (by examples)
• Understanding Web Components

2015

• Introducing Slot-Based Shadow DOM API
• 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
• Building an Accessible Disclosure Button – using Web Components
• Web Components and you – dangers to avoid
• The Web's Declarative, Composable Future
• The Shadow DOM Diaries
• A Detailed Introduction To Custom Elements

2013

• Performance and Custom Elements
• A Guide to Web Components
• Creating Reusable Markup with The HTML Template Element
• Working with Shadow DOM
• HTML's New Template Tag

2012

• The Basics of the Shadow DOM
• 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）	维尔贾米·萨尔米宁（Viljami Salminen）	扬·米科索夫斯基（Jan Miksovsky）	谢里·库里科夫（Serhii Kulykov）

License

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

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

@作者Mateus Ortizmteusortiz@gmail.com