js如何操作Shadow DOM Shadow DOM操作的6个核心知识点-js教程-PHP中文网

js如何操作Shadow DOM Shadow DOM操作的6个核心知识点

裘德小鎮的故事

发布： 2025-06-27 19:52:01

原创

716人浏览过

shadow dom是一种将dom结构隐藏并独立封装的技术，通过attachshadow()方法创建，返回shadowroot对象作为根节点。使用open模式可外部访问，closed模式则不可。向shadow dom添加内容可通过innerhtml插入html与css，样式仅内部生效。访问元素时，open模式用shadowroot结合queryselector操作，closed模式需预先保存引用。事件处理中，composed属性设为true可避免事件重定向。slot插槽允许外部内容插入指定位置，提升组件灵活性。css shadow parts支持从外部样式化内部元素。shadow dom是web components的重要组成部分，与custom elements和html templates协同工作。性能上需避免过度使用，调试可用开发者工具或console.log辅助。

js如何操作Shadow DOM Shadow DOM操作的6个核心知识点

Shadow DOM，简单来说，就是把DOM结构藏起来，形成一个独立的“影子”。JS操作它，其实就是进入这个“影子”世界，然后进行各种DOM操作。

掌握Shadow DOM操作，能让你更好地封装组件，避免全局样式污染，提高代码的健壮性。

Shadow DOM操作的6个核心知识点

如何创建和附加Shadow DOM？

创建Shadow DOM的核心是attachShadow()方法。这个方法会返回一个ShadowRoot对象，你可以把它看作是Shadow DOM的根节点。

const element = document.querySelector('#my-element');
const shadowRoot = element.attachShadow({mode: 'open'}); // 或者 {mode: 'closed'}

登录后复制

mode参数有两种：open和closed。

open：可以通过element.shadowRoot访问到Shadow DOM。
closed：无法从外部访问Shadow DOM，增强了封装性，但调试起来会麻烦一些。

个人建议，除非有特别强的安全需求，否则用open模式，方便调试。毕竟，调试才是程序员的日常。

如何向Shadow DOM中添加内容？

有了ShadowRoot，就可以像操作普通DOM一样，往里面添加各种元素了。

shadowRoot.innerHTML = `
  <style>
    p { color: blue; }
  </style>
  <p>This is a paragraph inside the Shadow DOM.</p>
`;

登录后复制

这里不仅可以添加HTML，还可以添加CSS样式。这正是Shadow DOM的强大之处，样式只在Shadow DOM内部生效，不会影响到外部。

如何访问Shadow DOM内部的元素？

如果Shadow DOM是open模式，可以通过element.shadowRoot访问到ShadowRoot对象，然后用querySelector或querySelectorAll等方法查找元素。

const element = document.querySelector('#my-element');
const shadowRoot = element.shadowRoot;
const paragraph = shadowRoot.querySelector('p');
console.log(paragraph.textContent); // 输出: This is a paragraph inside the Shadow DOM.

登录后复制

如果是closed模式，就无法直接访问了。只能在创建Shadow DOM的时候，保存对内部元素的引用。

如何处理Shadow DOM的事件？

Shadow DOM的事件处理有些特殊。有些事件会被重定向（retarget），比如鼠标事件。这意味着，如果在Shadow DOM内部点击一个元素，外部监听器接收到的事件目标是宿主元素（host element），而不是Shadow DOM内部的元素。

<my-element id="my-element">
  #shadow-root
    <button id="my-button">Click me</button>
</my-element>

<script>
  const element = document.querySelector('#my-element');
  element.addEventListener('click', (event) => {
    console.log(event.target); // 输出: <my-element id="my-element"></my-element>
  });

  const shadowRoot = element.attachShadow({mode: 'open'});
  shadowRoot.innerHTML = `<button id="my-button">Click me</button>`;
</script>

登录后复制

如果想在外部知道点击的是Shadow DOM内部的哪个元素，可以使用composed属性。将composed设置为true，事件就不会被重定向。

如何使用slot插槽？

Slot是Shadow DOM的一个重要特性，它允许外部内容插入到Shadow DOM的指定位置。

<my-element>
  <span slot="my-slot">This is external content.</span>
</my-element>

<template id="my-element-template">
  <style>
    div { border: 1px solid red; }
  </style>
  <div>
    <slot name="my-slot">This is default content.</slot>
  </div>
</template>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'});
      const template = document.getElementById('my-element-template');
      shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('my-element', MyElement);
</script>

登录后复制

在这个例子中，的内容会替换掉Shadow DOM中的。如果外部没有提供内容，就会显示默认内容“This is default content.”。

Slot让组件更加灵活，可以根据外部的需求定制显示内容。

如何使用CSS Shadow Parts？

CSS Shadow Parts允许你从外部样式化Shadow DOM内部的特定元素。

<my-element>
  #shadow-root
    <button part="my-button">Click me</button>
</my-element>

<style>
  my-element::part(my-button) {
    background-color: yellow;
    color: black;
  }
</style>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.innerHTML = `<button part="my-button">Click me</button>`;
    }
  }
  customElements.define('my-element', MyElement);
</script>

登录后复制

在这个例子中，my-element::part(my-button)选择器会选中Shadow DOM内部的

CSS Shadow Parts提供了一种更精细的样式控制方式，让组件的样式更加可定制。