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

创建影子根后，你可以对它使用以往在 document 对象上使用的所有 DOM 方法，例如使用 this.shadowRoot.querySelector 来查找元素。组件的所有 CSS 都在<style>标签内定义，但如果你想使用常规的<link rel =“stylesheet”>标签，也可以获取外部样式表。除常规 CSS 外，你还可以使用：host 选择器来设置组件本身的样式。例如，自定义元素默认使用 display：inline，以便将组件显示为可以使用的块元素：

:host { display: block;}
这样你也能使用上下文样式了。例如，如果要在组件具有 disabled 属性定义时将其显示为灰色，可以使用：

:host([disabled]) { opacity: 0.5;}
默认情况下，自定义元素会从周围的 CSS 继承一些属性，例如 color 和 font 等。但是如果你希望以纯净状态开始并将所有 CSS 属性重置为组件内的默认值，请使用：
:host { all: initial;}
要注意的是，从外部对组件本身定义的样式优先于 Shadow DOM 中使用：host 定义的样式。所以如果你要定义：
my-element { display: inline-block;}
它会覆盖：

:host { display: block;}
无法从外部设置自定义元素内的任何节点的样式。但是如果你希望用户能够设置组件的（部分）样式，则可以暴露 CSS 变量来做到这一点。例如，如果你希望用户能够选择组件的背景颜色，则可以暴露一个名为–background-color 的 CSS 变量。
假设组件中 Shadow DOM 的根节点是<div id =“container”>：

#container { background-color: var(--background-color);}
现在，组件的用户可以从外部设置其背景颜色：
my-element { --background-color: #ff0000;}
如果用户未定义组件，则应在组件内为其设置默认值：

:host { --background-color: #ffffff;} #container { background-color: var(--background-color);}
当然，你可以为 CSS 变量选择任何名称。 CSS 变量的唯一要求是它们要以“–”开头。
通过提供作用域 CSS 和 HTML，Shadow DOM 解决了 CSS 的全局特性所带来的特殊性问题，并且通常会产生巨大的仅添加样式表，其包含越来越多的特定选择器和覆盖。Shadow DOM 可以将标签和样式捆绑到独立的组件中，而无需任何工具或命名约定。你永远不必再担心新的类或 ID 是否会与现有的类冲突。