随着 Web 技术的不断发展，现在的网页不再是一棵简单的标记语言树，而是由众多的组件构成。这就带来了一些问题，如样式覆盖和组件间的样式耦合等等。为了解决这些问题，Web Components 提供了一种解决方案，即使用 Shadow DOM 实现样式封装，实现真正的组件化。
什么是 Shadow DOM？
Shadow DOM 实际上就是一种封装技术，它将一个元素及其子元素的样式、行为和结构封装在一起，从而形成一个独立的组件。与传统的 CSS 样式只能限制在一个页面或一个组件内不同，Shadow DOM 可以将页面或组件内的样式完全隔离，不被外部 CSS 样式所影响。
Shadow DOM 可以通过shadowRoot访问，这是一个 DOM 元素对象，它是该元素的封装。所有的 Shadow DOM 都是由一个“宿主元素”（host element）构成，宿主元素是在文档中定义的一个 HTML 元素。只有当 Shadow DOM 被添加到宿主元素后，浏览器绘制和布局才能触发。
Shadow DOM 的作用
- 实现样式隔离：Shadow DOM 可以将页面或组件内的样式完全隔离，不被外部 CSS 样式所影响。
- 实现组件化：Shadow DOM 让组件拥有自己的 DOM 结构，从而实现真正的组件化。
- 提供封装能力：Shadow DOM 可以将复杂的 DOM 结构隐藏，只暴露出一个干净简单的接口供使用。
如何使用 Shadow DOM？
要使用 Shadow DOM，可以使用以下代码创建一个被封装的 DOM 元素及其 Shadow DOM：
-- -------------------- ---- ------- --------- ----- ------ ------ -------- ----- -------- - ----------------------------------- ------------------ - - ------- ------ - ----------------- -------- ------- ----- ------ ------ -------- ---- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- ------- --- ---- ------- -------- - -------- ------------ -- - --------------- -- ----- -------- ------- ----------- - ------------- - -------- ------------------------ --------- -------------------------------------------------------------- - - ---------------------------------- ---------- --------- ------- ------ ----------------------- ------- -------展开代码
当使用该组件时，不仅仅只是创建了一个新的 HTML 元素，还创建了一个封装了 DOM 结构和样式的 Shadow DOM，这使得该组件可以自主地控制其内部的样式和行为，而不受外部 CSS 或 JavaScript 的影响。
Shadow DOM style 属性与样式封装
Shadow DOM 对外部样式表具有隔离作用，但是对于有时候需要提供一些灵活性的场景，例如为 Shadow DOM 元素根据外部输入改变样式，可以使用 Shadow DOM 的 style 属性来动态改变元素样式，如：
-- -------------------- ---- ------- --------- ----- ------ ------ -------- ----- -------- - ----------------------------------- ------------------ - - ------- ------ - ----------------- -------- ------- ----- ------ ------ -------- ---- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- ------- --- ---- ------- -------- - -------- ----------------- -- ----- -------- ------- ----------- - ------------- - -------- ------------------------ --------- -------------------------------------------------------------- ----------- - ---------------------------------------- -------------------------- ------- - ------ --- -------------------- - ------ ---------- - ------------------------------ --------- --------- - -- ----- --- -------- - --------------------------------- - --------- - - - ---------------------------------- ---------- --------- ------- ------ ----------------------- ------- -------展开代码
在上面的例子中，我们在 Shadow DOM 外设置 my-button 元素的属性 color 时，会调用 attributeChangedCallback 方法，从而改变 Shadow DOM 中 button 元素的样式。
小结
Shadow DOM 可以使 Web 组件封装样式、封装结构、提供灵活的插入点，实现真正的组件化开发。在实际开发中，我们可以使用框架，如 Polymer 和 Vue，来更方便地使用 Shadow DOM 进行封装。Shadow DOM 对于现代 Web 开发人员来说是一种必须掌握的技术，能够在开发复杂组件时大大提高我们的开发效率和项目的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c3f33b314edc2684e30183
