Web Components

Web Components the Right Way

Awesome

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

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

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

Introduction

Standards

Custom Elements

自定义元素为作者提供了一种构建自己的功能齐全的DOM元素的方法.

Shadow DOM

Shadow DOM描述了一种将多个DOM树组合到一个层次结构中的方法,以及这些树如何在文档中彼此交互,从而实现DOM更好的组合.

HTML Templates

<template>元素用于声明可通过脚本克隆并插入文档的HTML片段.

CSS Shadow Parts

CSS Shadow Parts允许开发人员在Shadow DOM中公开某些元素以用于样式设计.

Polyfills

Custom Elements polyfills

Customized Built-in Elements polyfills

Shadow DOM shims

HTML Templates polyfills

Guides

Accessibility

Best Practices

Codelabs

Examples

Articles

Architecture

Styling

Interoperability

Real World

Case Studies

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

Use Cases

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

Benchmarks

Frameworks

Angular

React

Vue

Svelte

Ecosystem

Starter Kits

Tools

Books

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

Talks

Usage Metrics

Proposals

Form-associated Custom Elements

Custom State Pseudo class

Constructable Stylesheet Objects

Miscellaneous

History

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

2019

2018

2017

2016

2015

2014

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