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

Question

我有一个 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

的整个目的，但也许不会？

需要明确的是，在此示例中，子标题范围不是是带槽的子标题。它始终是组件的一部分，并且位于 Shadow dom 中。上面的示例是在浏览器中渲染的组件。 谢谢！

Answer 1

设置样式

::part

节点本身

。 不是孩子，那会破坏

::part

的目的，

或许还可以从 

outside
允许 all ShadowDOM 样式。 （做不到）

exportparts

属性可以将part定义传递给父节点

正如评论中提到的； 您可以指定

<span part="subheader">

,

OR
您可以使用 CSS 属性，scoped 到 part，请参阅 --subheader: blue这完全取决于您想要向组件用户提供多少控制权以及哪种控制权。

好的博客：

为什么我的shadowDOM继承样式
::parts
• ，莫妮卡·丁库莱斯库（Google）：

  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>