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¶
Constructable Stylesheet Objects¶
- Specification Draft
- web-platform-tests
- Explainer
- Constructable Stylesheets -Chrome平台状态中的功能.
Builtin Modules¶
- std-switch -关于“
HTML元素实现了“ switch”控件. - std-toast -关于“
HTML元素实现了“吐司”弹出通知. - web-platform-tests
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¶
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
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¶
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 - Collection of Web Components made by Clever Cloud.
- 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 -手绘，粗略外观的一组通用UI元素.
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¶
Ember¶
Aurelia¶
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¶
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¶
2012¶
2011¶
Who To Follow¶
Chrome开发人员
|
聚合物
|
边缘平台更新
|
Web组件
|
伊藤人
|
罗伯·道森
|
埃里克·比德尔曼
|
贾斯汀·法格纳尼（Justin Fagnani）
|
License¶
版权所有2014-2018，保留所有权利.
根据以下方式许可的代码： MIT license
@作者Mateus Ortiz mteusortiz@gmail.com