设置Shape Dom：：Part元素的子元素样式 [英] Style children of shadow dom ::part element

问题描述

我有一个Web组件，它在阴影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>

是否有方法以影子部件的子项为目标？也就是说，如下所示(似乎不起作用)：

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

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

明确地说，在本例中，副标题范围是而不是一个带槽的子项。它始终是组件的一部分，并且在影子DOM中。以上示例用于在浏览器中呈现组件。

谢谢！

推荐答案

唉，只能::part节点本身。

不是儿童，这将违背::part的目的
那么不妨允许所有shadowDOM样式从外部开始。(无法完成)

如果不想指定part="subheader"， 您可以使用范围部分的css属性，请参阅--subheader: blue

好博客：

• Why is my shadowDOM inheriting styles
• ::partsMonica Dinculescu(Google)：https://meowni.ca/posts/part-theme-explainer/

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<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>

这篇关于设置Shape Dom：：Part元素的子元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！