Web Components

Web Components the Right Way

Awesome

>精选的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

Form-associated Custom Elements

Custom State Pseudo class

Constructable Stylesheet Objects

Polyfills

@webcomponents

下面的填充料由Polymer团队维护.

@ungap

下面的填充填充物由 ungap project.

Articles

Introduction

Custom Elements

Shadow DOM

HTML Templates

Best Practices

Interoperability

Accessibility

Use Cases

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

  • Stencil -生成Web组件的编译器.
  • Svelte -控制论增强的Web应用程序(可以选择生成Web组件).

Other

Component Libraries

Frameworks

Angular

Vue

Ember

Aurelia

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

- 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

Benchmarks

Miscellaneous

History

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

2017

2016

2015

2014

2013

2012

2011

Who To Follow

聚合物
模版
open-wc.org
webcomponents.dev
贾斯汀·法格纳尼(Justin Fagnani)
威廉·萨尔米宁
扬·米科索夫斯基
谢里·库里科夫(Serhii Kulykov)

License

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

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

@作者Mateus Ortiz mteusortiz@gmail.com