你的前端框架要被 Web 组件取代了(6)

现在，只要 disabled 属性发生更改，就会在 this.container 上切换“disabled”类，这是元素 Shadow DOM 中的 div 元素。
下面我们进一步来看。
Shadow DOM使用 Shadow DOM 时，自定义元素的 HTML 和 CSS 会完全封装在组件内部。这意味着该元素将在文档的 DOM 树中显示为单个 HTML 标签，其内部 HTML 结构则放在一个 #shadow-root 中。
其实 Shadow DOM 也用在几个原生 HTML 元素上。例如当你的网页中有<video>元素时，它会显示为单个标签；但它也会显示视频的播放控件，这个控件是不会显示在浏览器开发工具中的<video>元素上的。
这些控件实际上是<video>元素的 Shadow DOM 的一部分，因此默认情况下是隐藏的。要在 Chrome 中显示 Shadow DOM，请转到开发工具设置中的“首选项”，然后选中“显示用户代理 Shadow DOM”复选框。当你在开发工具中再次检查视频元素时就能看到并检查元素的 Shadow DOM 了。
Shadow DOM 还提供真正的作用域 CSS。组件内定义的所有 CSS 仅适用于组件本身。该元素仅从组件外部定义的 CSS 继承最少量的属性，甚至可以将这些属性配置为不从周围的 CSS 继承任何值。但你也可以公开 CSS 属性以允许使用者为组件设置样式。这解决了许多当下存在的 CSS 问题，同时仍然可以使用组件的自定义样式。
要定义一个影子根（Shadow root）：

const shadowRoot = this.attachShadow({mode: 'open'});shadowRoot.innerHTML = `<p>Hello world</p>`;
这里定义了一个带有 mode：’open’的影子根，这意味着它可以在开发工具中检查，并通过查询、配置任何公开的 CSS 属性或监听它抛出的事件来交互。也可以用 mode：’closed’定义影子根，但这里不推荐这样做，因为它不允许组件的使用者以任何方式与它交互；你甚至无法监听到它抛出的事件。
要将 HTM 添加到影子根，你可以为其 innerHTML 属性分配 HTML 字符串或使用<template>元素。HTML 模板基本上是一个惰性 HTML 片段，你可以定义它以便以后使用。在实际插入 DOM 树之前，它将不会被显示或解析，这意味着在其中定义的任何外部资源都不会被提取，并且在将其插入 DOM 之前不会解析任何 CSS 和 JavaScript。当组件的 HTML 根据其状态更改时，你可以定义多个<template>元素，从而根据组件的状态插入这些元素，诸如此类。这样你就可以轻松更改组件的大部分 HTML 内容，而无需摆弄单个 DOM 节点。