外部的 CSS 不能直接应用到 Shadow DOM 内部的元素。Shadow DOM 是 Web Components 技术的一部分，它的设计目的之一就是提供样式封装（style encapsulation），这意味着：

• 外部页面的 CSS 不会影响 Shadow DOM 内部的样式。
• Shadow DOM 内部定义的样式不会“泄露”到外部页面中。

示例说明

假设你有一个自定义元素 <my-element>​，它内部有 Shadow DOM：

<my-element></my-element>

你在外部写了这样的 CSS：

my-element .inner {
  color: red;
}

而你的 <my-element>​ 的 Shadow DOM 内容可能是这样的：

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        .inner {
          color: blue;
        }
      </style>
      <div class="inner">Hello from Shadow DOM</div>
    `;
  }
}
customElements.define('my-element', MyElement);

在这种情况下：

• 外部 CSS 中 .inner { color: red; }​ 对 Shadow DOM 中的内容 无效。
• Shadow DOM 内部的样式只作用于 Shadow DOM 内部。

如何影响 Shadow DOM 的样式？

✅ 方法一：在 Shadow DOM 内部写样式

直接在 Shadow DOM 中添加 <style>​ 标签是最推荐的方式。

✅ 方法二：通过 part​ 和 ::part​ 伪元素（CSS Shadow Parts）

这是现代浏览器支持的一种方式，允许外部 CSS 选择性地影响 Shadow DOM 中的部分内容。

Shadow DOM 内部：

<div part="title">This is a title</div>

外部 CSS 可以这样写：

my-element::part(title) {
  color: green;
  font-size: 20px;
}

✅ 这是目前唯一官方支持、安全可控的让外部 CSS 影响 Shadow DOM 的方法。

❌ 方法三：使用全局样式（如 !important​）强行覆盖 —— 不推荐

虽然某些样式属性（如 font-family​, color​）会通过继承影响 Shadow DOM 内部元素，但不建议使用 !important​ 或强制穿透封装的方式来修改 Shadow DOM，这违背了封装的设计初衷。

总结

‍