Web Components
Web Components the Right Way¶
>精选的Web组件资源精选列表.
Web Components —一套不同的技术，使您可以创建可重用的自定义元素（其功能与其他代码封装在一起），并在Web应用程序中使用它们.
> Web Components的正确方法是由爱创造 Mateus Ortiz 并由 Serhii Kulykov
Introduction¶
- 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
- 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
- What is the Shadow DOM?
- web-platform-tests
HTML Templates¶
<template>元素用于声明可通过脚本克隆并插入文档的HTML片段.
- HTML Living Standard: The
templateelement - 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 -
partglobal 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提供的
importNodepolyfill 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 still need to be accessible
Best Practices¶
- Custom Element Best Practices
- Gold Standard Checklist for Web Components
- Guidelines for creating web platform compatible components
- How to Publish Web Components to NPM
- Open Web Components Recommendations
- Publishing Web Components to NPM
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 Web Components with Stencil
- Handling data with Web Components
- How to use D3js with WebComponents
- Open Web Components: Codelabs
- Recreating The Arduino Pushbutton Using SVG And
<lit-element> - Snake-Eating Game Making with Web Components of Omi and MVP Architecture
- Storybook for web components on steroids
- Testing Workflow for Web Components
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
Styling¶
- 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
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
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)
- 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
- Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt
- web.dev engineering blog #1: How we build the site and use Web Components
Component Libraries¶
- 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 core -收集用于构建Brightspace应用程序的Web组件.
- Clever components -由Clever Cloud制作的Web组件集合.
- DataFormsJS -用于SPA路由，显示来自Web服务的数据等的独立组件.
- elements-sk -用于“点菜”网站开发的自定义元素的集合.
- Elix -用于通用用户界面模式的高质量，可定制的Web组件.
- Iooxa -用于交互式科学写作，反应性文档和可解释性说明的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应用程序的组件.
- TEI Publisher Components -TEI Publisher使用的Web组件及其生成的应用程序的集合.
- Tradeshift Elements -可重用的Tradeshift UI组件作为Web组件.
- Vaadin components -用于构建业务Web应用程序的不断发展的高质量Web组件集.
- Wired Elements -手绘，粗略外观的一组通用UI元素.
- Wokwi Elements -Arduino和各种电子零件的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 - Collection of framework-agnostic elements based on the Chameleon Design System.
- Crayons -遵循Freshworks设计系统的Web组件集合.
- Helix UI -Helix设计系统的Web组件库.
- Material Web Components -将材料设计实现为Web组件.
- NuML | 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元素集.
- Zooplus web components -实现Z +商店样式指南的一组Web组件.
Use Cases¶
- How we chose to build our Design System using StencilJS 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组件库.
- LitElement -用于创建快速，轻量级Web组件的简单基类. 聚合物项目的一部分.
- Lightning Web Components -快速的企业级Web组件基础.
- Omi -4kb JavaScript的下一代Web框架（Web组件+ JSX +代理+存储+路径更新）.
- 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库.
Integrations¶
- ember-custom-elements -使用自定义元素渲染Ember和Glimmer组件.
- preact-custom-element -从预设组件生成/注册自定义元素.
- react-shadow -在React中利用Shadow DOM以及样式封装的所有好处.
- 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组件库中构建了相同的todo应用程序.
Frameworks¶
Angular¶
- Angular Elements Overview
- Building Custom Elements / Web Components with Angular 6
- How to use Angular ngModel and ngForms with WebComponents
- Using Web Components in Angular
- Web Components With Angular Ivy In 6 Steps
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¶
Ecosystem¶
Starter Kits¶
- Create Open Web Components -Web组件项目支架.
- custom-element-boilerplate -用于创建自定义元素的样板.
- hello-web-components -用TypeScript编写的简单的入门hello世界Web组件.
- nutmeg -用少许香料构建，测试和发布香草Web组件.
Tools¶
- Cypress Daywalker -赛普拉斯的Web组件和Shadow DOM支持.
- query-selector-shadow-dom -可以刺入Shadow DOM根的querySelector，对于自动测试很有用.
- shadow-automation-selenium -使用Selenium的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
-“ 现代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
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
- 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¶
Constructable Stylesheet Objects¶
- Specification Draft
- web-platform-tests
- Explainer
- Constructable Stylesheets -Chrome平台状态中的功能.
Miscellaneous¶
- bruck -使用Web组件和Houdini Paint API构建的原型系统.
- Vaadin Directory -发布，讨论和评估Web组件
- webcomponents.dev -您的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¶
2012¶
2011¶
Who To Follow¶
聚合物
|
模版
|
open-wc.org
|
webcomponents.dev
|
贾斯汀·法格纳尼（Justin Fagnani）
|
维尔贾米·萨尔米宁（Viljami Salminen）
|
扬·米科索夫斯基
|
谢里·库里科夫
|
License¶
版权所有2014-2018，保留所有权利.
根据以下方式许可的代码： MIT license
@作者Mateus Ortiz mteusortiz@gmail.com