Web Components尝试

[Lanttcat]

学习Web Components的本意是希望把它和React结合到一起，看能不能在组件复用方面有些突破

目前的问题

1. 一个node tree可以attach几个Shadow root
2. 如何实现数据的逆向流动

关键技术

坊间传言，有四项主要的技术：

• Custom elements（自定义元素）： 一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。这里是W3C的文档
• Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates（HTML模板）： <template>和slot元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
• HTML Imports（HTML导入）： 一旦定义了自定义组件，最简单的重用它的方法就是使其定义细节保存在一个单独的文件中，然后使用导入机制将其导入到想要实际使用它的页面中。HTML 导入就是这样一种机制，尽管存在争议 — Mozilla 根本不同意这种方法，并打算在将来实现更合适的。

大体的过程是：

1. 使用ECMAScript 2015类语法创建一个类，来指定web组件的功能(参阅类获取更多信息)。
2. 使用CustomElementRegistry.define()方法注册您的新自定义元素 ，并向其传递要定义的元素名称、指定元素功能的类以及可选的，其所继承自的元素。
3. 如果需要的话，使用Element.attachShadow()方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。
4. 如果需要的话，使用[` 和 ``方法定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
5. 在页面任何您喜欢的位置使用自定义元素，就像使用常规HTML元素那样。

[Lanttcat]

相关文章

Web Components will replace your frontend framework HTML Living Standard

[Lanttcat]

写俩AboutMe和Code Format的demo

[Lanttcat]

Polymer框架

[Lanttcat]

Shadow DOM的样式问题

基本使用

<style>
  c-e::part(textspan) { color: red; }
</style>

<template id="c-e-template">
  <span part="textspan">This text will be red</span>
</template>
<c-e></c-e>
<script>
  // Add template as custom element c-e
  ...
</script>

能够应用样式选择器

custom element的嵌套样式选择

[Lanttcat]

一些定义

关于shadow

Shadow Root和Shadow host：一个Element绑定了Shadow Root，那么就称这个Element为Shadow host

[Lanttcat]

几个主要的回调函数

1. connectedCallback
2. disconnectedCallback
3. adoptedCallback
4. attributeChangedCallback