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
- 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)
- How Web Components Are Used at GitHub and Salesforce
- 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 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>
-使用Svelte构建的Web组件,用于查看文件.<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 -用于“点菜”网站开发的自定义元素的集合.
- 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 - Reusable Tradeshift UI Components as Web Components.
- 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 -清晰设计系统中的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 -Pearson的共享组件库实现了Gravity设计系统.
- 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 -从预设组件生成/注册自定义元素.
- @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¶
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¶
- 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¶
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¶
2011¶
Who To Follow¶
![]() 聚合物
|
![]() 模版
|
![]() open-wc.org
|
![]() webcomponents.dev
|
![]() 贾斯汀·法格纳尼(Justin Fagnani)
|
![]() 维尔贾米·萨尔米宁(Viljami Salminen)
|
![]() 扬·米科索夫斯基
|
![]() 谢里·库里科夫(Serhii Kulykov)
|
License¶
版权所有2014-2018,保留所有权利.
根据以下方式许可的代码: MIT license
@作者Mateus Ortizmteusortiz@gmail.com