css ：：part 伪 Select 器 Chrome 兼容性

发布于12月31日

我最近一直在学习关于定制元素和LIT js的知识.我正在try 使用::part伪 Select 器设置我的组件的样式.

这在 firefox 上可以用，但在Chrome上似乎不行.

据我所知，这应该在两者中都得到支持.我已经能够在代码笔(链接如下)中复制该问题.

我应该期待这段代码在Chrome中呈现一个红色方块吗？

import * as lit from "https://cdn.skypack.dev/lit@2.5.0";

class TTest extends lit.LitElement {
  static styles =  lit.css`
    ::part(test) {
      display: block;
      color: red;
      background-color: red;
      height: 200px;
      width: 200px;
    }
  `
  
  render() {
    return lit.html`
      <div part="test">
      
      </div>
    `
  }
}

customElements.define('t-test', TTest);

Firefox版本:108.0.1 (64-bit)
Chrome版本:108.0.5359.124 (Official Build) (64-bit)
操作系统:Arch Linux x86_64 6.1.1-arch1-1

Code Pen.Code Pen ||| Can I Use.

推荐答案

看起来你发现了一个窃听器

::part, a set of pseudo-elements that allow you to style inside a shadow tree,
from outside of that shadow tree.

firefox 似乎允许从insidethe shadowTree本身进行样式设置

此本地代码在浏览器中具有不同的输出:

<style>
    wc-container ::part(redpart) {
      color: yellow;
      background-color: red;
    }
</style>

<wc-container>
  <wc-part-test> red part </wc-part-test>
</wc-container>

<wc-part-test> NOT red part </wc-part-test>

<script>
  customElements.define('wc-container', class extends HTMLElement {
  constructor(){
     super().attachShadow({mode:"open"}).innerHTML=`<slot/>`;
  }});
  customElements.define('wc-part-test', class extends HTMLElement {
  constructor(){
     super()
      .attachShadow({mode:"open"})
      .innerHTML = 
        `<style>::part(redpart){ font:2em Arial }</style>` + 
        `Hello <span part="redpart"><slot></slot></span> Web Component`;
  }});
</script>

firefox

因为<style>在shadowRoot内，所以font样式can可以在without ::part中完成

chromium

狩猎

请共享指向您的屏幕截图的链接；或编辑此答案

Conclusion

https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md
Says: "to style inside a shadow tree, from outside of that shadow tree."
Some AI that often gives inclomplete answers says:
"To summarize, the ::part pseudo-element is used to style elements within a Shadow DOM shadow tree that have a part attribute. It does not style the shadow root itself."

I can see use-cases for both behaviors, wonder what is used in the world already
I use ::part the Chrome way