如何修改#shadow-root (open)中特定元素的CSS？示例解析

Shadow DOM（包括Open模式的Shadow Root）自带样式隔离机制，外部CSS默认无法直接穿透到内部。针对你的示例（修改Shadow Root内<p>标签的display属性），可以通过以下几种方式实现：

方法1：通过JavaScript注入样式（适用于无Shadow Root控制权的场景） #

如果目标Shadow Root是open模式，你可以通过JS获取Shadow Root对象，然后向其内部注入样式：

// 获取宿主元素
const host = document.getElementById('one');
// 获取open的Shadow Root
const shadowRoot = host.shadowRoot;

// 方式A：插入<style>标签
const style = document.createElement('style');
style.textContent = `
  #three p {
    display: none;
  }
`;
shadowRoot.appendChild(style);

// 方式B：直接修改目标元素的行内样式
const targetPara = shadowRoot.querySelector('#three p');
if (targetPara) {
  targetPara.style.display = 'none';
}

方法2：在Shadow Root内部定义样式（适用于自定义元素/有控制权的场景） #

如果你是自己创建的Shadow Root（比如开发自定义元素），最佳实践是直接在Shadow DOM内部嵌入样式：

class CustomElement extends HTMLElement {
  constructor() {
    super();
    // 创建open的Shadow Root
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 内部嵌入样式和DOM结构
    shadowRoot.innerHTML = `
      <style>
        #three p {
          display: none;
        }
      </style>
      <div id="two">
        <div id="three">
          <p>Text</p>
        </div>
      </div>
    `;
  }
}
// 注册自定义元素
customElements.define('custom-element', CustomElement);

使用时直接替换原HTML中的<div id="one">为<custom-element></custom-element>即可。

方法3：利用::part()选择器（组件暴露可样式化部分时） #

如果Shadow Root内的元素添加了part属性（比如组件开发者主动暴露样式入口），你可以在外部CSS中直接样式化：

假设Shadow Root内的<p>标签定义为：

<p part="shadow-text">Text</p>

则外部CSS可写：

#one::part(shadow-text) {
  display: none;
}

注意：外部CSS无法直接通过#one p这类选择器选中Shadow Root内部元素，因为样式隔离机制会阻止外部样式穿透，除非组件主动提供了样式入口（如::part()或::slotted()）。

内容的提问来源于stack exchange，提问作者Adler