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

Builtin Modules

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

Chrome开发人员
聚合物
边缘平台更新
Web组件
伊藤人
罗伯·道森
埃里克·比德尔曼
贾斯汀·法格纳尼(Justin Fagnani)

License

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

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

@作者Mateus Ortiz mteusortiz@gmail.com