Shadow DOM 内部构造及如何构建独立组件

模板有一些不足的地方，主要的不足在于静态内容不允许开发者像一般的标准 HTML 模板那样渲染自定义的变量或者数据。

这时候 就派上用场了。

可以把插槽看成是允许开发者在模板中放置自定义 HTML 的占位符的功能。这样开发者就可以创建能用的 HTML 模板并且通过引入插槽来自定义渲染内容。

让我们看一下以上模板添加一个插槽的代码如下：

如果在标记中引用该元素的时候没有定义插槽内容，或者浏览器不支持插槽，则 只会包含默认的 "Default text" 内容。

若想要定义插槽内容，开发者得在 中定义元素 HTML 结构的 slot 属性值和对应填充的插槽名称保持一致即可。

如前所述，开发者可以随便写插槽内容：

 Let"s have some different text!

所有可以被插入插槽的元素被称为可插入元素；已插入插槽元素称为插槽元素。

注意以上示例中插入的 元素即是插槽元素。它拥有一个 slot 属性，属性值和模板中插槽定义的 name 属性值相等。

浏览器渲染之后，以上代码会创建如下扁平 DOM 树：

  #shadow-root
  

    
      Default text
    
  
  Let"s have some different text!

这里原文有误，有改动。

注意 #shadow-root 元素只是表示存在 Shadow DOM 而已。

可以在主页面样式化含有 shadow DOM 的组件，可以定义组件样式或者提供 CSS 自定义属性的形式让用户覆盖掉默认样式值。

局部样式 是 Shadow DOM 极好的功能之一：

主页面上的 CSS 选择器不会影响到组件内部元素的样式。

组件内部定义的样式不会影响页面上的其它元素样式。它们只作用于宿主元素。

Shadow DOM 中的 CSS 选择器只影响组件内部的元素。实际上，这意味着开发者可以重复使用通用的 id/class 名称而不用担心和主页面上的其它样式发生冲突。简单的 CSS 选择器可以提高页面性能。

让我们看一下如下 #shadow-root 中定义的一些样式：

#shadow-root

以上示例中的样式只会作用于 #shadow-root 内部。

开发者也可以在 #shadow-root 里面使用 元素来引入样式表，也只作用于 #shadow-root 内部。

:host 伪类允许开发者选择和样式化包含 shadow 树的宿主元素：

只有一个地方需要注意即若主页面上定义的宿主元素样式优先级比元素里面定义的 :host 样式规则要高。这样就允许开发者从外部覆盖掉组件内部定义的顶级样式。

即当在主页面上定义了如下的样式：

my-paragraph {
  marbin-bottom: 40px;
}

同理，:host 只在shadow 根的上下文中起作用，因此开发者不能够在 Shadow DOM 外面使用。

:host() 这样的功能样式允许开发者只样式化匹配 的宿主元素。这是一个绝佳的方式，开发者可以在组件内部封装响应用户交互或者状态的行为，然后基于宿主元素来样式化内部节点。

:host-context() 伪类找出宿主元素或者宿主元素任意的祖先元素匹配 。

常用于定制化。例如，开发者通过为 或者 添加类来进行定制化：

  
  …
  

或者

  …

当宿主元素的祖先元素包含有 .lightheme 类 :host-context(.lightheme) 将会样式化 ：

:host-context(.lightheme) {
  color: black;
  background: white;
}

可以使用 :host-context() 来进行定制化主题样式，但是更好的方法即通过 CSS 自定义属性来创建样式钩子。

开发者可以从外部通过把标签名作为选择器来样式化组件宿主元素，如下：

custom-container {
  color: red;
}

外部样式比 Shadow DOM 中定义的样式拥有更高的优先级。

例如，假设用户书写如下选择器：

custom-container {
  width: 500px;
}

将会覆盖如下组件样式规则 ：

:host {
  width: 300px;
}

组件自身样式化只能做到这么多。但如果想要样式化组件内部属性呢？这就需要 CSS 自定义属性。

若组件作者使用 CSS 自定义属性提供样式钩子，用户可以用来更改内部样式。

这和 思路类似只是应用到了样式。

让我们看如下示例：

…

Shadow DOM 内部：

:host([background]) {
  background: var(--custom-container-bg, #CECECE);
  border-radius: 10px;
  padding: 10px;
}

该示例中，因为用户提供了该背景颜色值，所以组件将会把黑色作为背景颜色值。否则，默认为 #CECECE。

作为组件作者，需要让开发者知道可以使用的 CSS 自定义属性。可以把自定义属性看作组件的公共接口。

Shadow DOM API 可能用来操作插槽。

当一个插槽的分发元素节点发生变化的时候触发 slotchange 事件。例如，当用户从 light DOM 中添加/删除子节点。

var slot = this.shadowRoot.querySelector("#some_slot");
slot.addEventListener("slotchange", function(e) {
  console.log("Light DOM change");
});

可以在元素的构造函数中创建 MutationObserver 来监听 light DOM 的其它类型的修改事件。前面文章中有介绍过 MutationObserver 的内部构造及使用指南。

了解哪些元素是和插槽有关是很有用处的。调用 slot.assignedNodes() 可以找出哪些元素是由插槽渲染的。flatten: true} 选项会返回插槽的默认内容(若没有分发任何节点)。

看一下如下示例：

Default content

假设以上内容包含在一个叫做 的组件内部。

让我们查看一下该组件的不同用法，然后调用 assignedNodes() 输出不同的结果：

第一例中，我们将往插槽中添加内容：

   container text 

调用 assignedNodes() 将会返回 [ container text ]。注意结果为一个节点数组。

第二例中，将不添加内容：

调用 assignedNodes() 将会返回空数组 []。

但是，假设添加 {flatten: true} 参数将会返回默认内容：[

Default content

同理，为了查找插槽中的元素，开发者可以调用 assignedNodes() 来找出元素被挂载到哪个组件插槽中。

Shadow DOM 中的事件冒泡的经过是值得注意的。

事件目标被调整为维护 Shadow DOM 的封闭性。当事件被重新定位，看起来是由组件自身产生而不是组件的 Shadow DOM 内部元素。

这里有传播出 Shadow DOM 的事件列表(还有一些只能在 Shadow DOM 内传播)：

Focus 事件：blur, focus, focusin, focusout

鼠标事件：click, dblclick, mousedown, mouseenter, mousemove 等.

滚轮事件: wheel

输入事件: beforeinput, input

键盘事件: keydown, keyup

组合事件: compositionstart, compositionupdate, compositionend

拖拽事件: dragstart, drag, dragend, drop 等.

默认情况下，自定义事件不会传播出 Shadow DOM。开发者若想要分派自定义事件且想要传播出 Shadow DOM，需要添加 bubbles: true 和 composed: true 选项参数。

让我们瞧瞧类似这样的事件分派：

var container = this.shadowRoot.querySelector("#container");
container.dispatchEvent(new Event("containerchanged", {bubbles: true, composed: true}));

可以通过检查 attachShadow 来检查是否支持 Shadow DOM 功能：

const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

参考资料：

https://developer.mozilla.org...

https://developers.google.com...

https://developer.mozilla.org...

https://www.html5rocks.com/en...