设置Shape Dom：：Part元素的子元素样式-前端问题

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

本文介绍了设置Shape Dom：：Part元素的子元素样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个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元素的子元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！