Shadow dom ::part 元素的样式子元素

我有一个 Web 组件，可以在 Shadow dom 中呈现以下内容：

<custom-banner>
  #shadow-root
    <div part="headertext">
      I am the header text!
    </div>
    ...
</custom-banner>

设计风格headertext，以下 css 效果很好：

custom-banner::part(headertext) {
  border: 5px solid green;
}

现在说我有这样的东西：

<custom-banner>
  #shadow-root
    <div part="headertext">
      I am the header text!
      <span>I am the subheader text!</span>
    </div>
    ...
</custom-banner>

有没有办法瞄准children阴影部分？也就是说，像这样的东西（这似乎不起作用）：

custom-banner::part(headertext) span {
  border: 5px solid red;
}

我意识到这种事情可能会削弱整个目的::part，但也许不是？

需要明确的是，副标题跨度是not在这个例子中是一个有槽的孩子。它始终是组件的一部分，并且is在影子dom中。上面的示例是在浏览器中呈现的组件。

Thanks!

唉，你可以唯一的风格 the ::part 节点本身.

不是孩子，那会打败::part目的，
不妨允许allShadowDOM 样式来自outside then. (做不到)

The 出口零件 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts属性可以传递part父节点的定义

正如评论中提到的； 您可以指定一个<span part="subheader">,
OR你可以使用 CSS 属性，scoped to the part, see --subheader: blue

这完全取决于您想要向组件用户提供多少控制权以及哪种控制权。

好的博客：

• 为什么我的shadowDOM继承样式 https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
• ::parts作者：莫妮卡·丁库列斯库（谷歌）：https://meowni.ca/posts/part-theme-explainer/ https://meowni.ca/posts/part-theme-explainer/

<style>
  body {
    /* note how 'inheritable styles' do style shadowDOM */
    font: 28px Arial;
    color: green;
  }
  custom-banner::part(headertext) {
    /* style shadowDOM from global CSS */
    background: pink;
    --subheader: blue;
  }
</style>

<custom-banner></custom-banner>

<script>
  customElements.define("custom-banner", class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({mode:"open"})
        .innerHTML = `<style> span {  color:var(--subheader)  } </style>` +
                     `<div part="headertext">I am the header text!` +
                        `<span>I am the subheader text!</span>` +
                     `</div>`;
    }
  });
</script>