使用 ::part 为 Shadow DOM 元素设置样式

Question

我正在尝试使用 ::part 将 css 样式应用于 shadow DOM 中的元素。参考 - https://www.w3.org/TR/css-shadow-parts-1/#selectordef-part, https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md

在下面的代码中 - Words: 120 在阴影 DOM 内。

class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    var wcParent = this.parentNode;

    function countWords(node) {
      var text = node.innerText || node.textContent
      return text.trim().split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // Create a shadow root
    var shadow = this.attachShadow({
      mode: 'open'
    });

    // Create text node and add word count to it
    var text = document.createElement('span');
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)
  }
}

// Define the new element
customElements.define('word-count', WordCount, {
  extends: 'p'
});

<h1>Word count rating widget</h1>

<article contenteditable="">
  <h2>Sample heading</h2>

  <p>Pellentesque ornare tellus sit amet massa tincidunt congue. Morbi cursus, tellus vitae pulvinar dictum, dui turpis faucibus ipsum, nec hendrerit augue nisi et enim. Curabitur felis metus, euismod et augue et, luctus dignissim metus. Mauris placerat
    tellus id efficitur ornare. Cras enim urna, vestibulum vel molestie vitae, mollis vitae eros. Sed lacinia scelerisque diam, a varius urna iaculis ut. Nam lacinia, velit consequat venenatis pellentesque, leo tortor porttitor est, sit amet accumsan
    ex lectus eget ipsum. Quisque luctus, ex ac fringilla tincidunt, risus mauris sagittis mauris, at iaculis mauris purus eget neque. Donec viverra in ex sed ullamcorper. In ac nisi vel enim accumsan feugiat et sed augue. Donec nisl metus, sollicitudin
    eu tempus a, scelerisque sed diam.
  </p>

  <p part="some-box" is="word-count">
  </p>
</article>

尝试使用不同的方式将样式应用到阴影 DOM 但没有成功。示例

::part(some-box) span{
  color: beige;
}

如何使用 ::part 将样式应用于阴影 DOM 跨度元素？

Answer 1

必须定义 part 属性：

影子里面DOM,
在要应用样式的元素上。

在你的例子中，它是 <span> 元素：

<p is="word-count">
  #shadow-dom
    <span part="some-box">Words: 120</span>
</p>

(global)::part伪元素是这样定义的，前面有或没有自定义元素选择器：

[is=word-count]::part(some-box) {
  color: beige;
}

请参阅下面的运行示例。

class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    var wcParent = this.parentNode;

    function countWords(node) {
      var text = node.innerText || node.textContent
      return text.trim().split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // Create a shadow root
    var shadow = this.attachShadow({
      mode: 'open'
    });

    // Create text node and add word count to it
    var text = document.createElement('span');
    text.textContent = count;
    text.setAttribute( 'part', 'some-box' )

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)
  }
}

// Define the new element
customElements.define('word-count', WordCount, {
  extends: 'p'
});

p::part(some-box) {
   color: red ;
}

<h1>Word count rating widget</h1>

<article contenteditable="">
  <h2>Sample heading</h2>

  <p>Add some words please. 
  </p>

  <p is="word-count">
  </p>
</article>

使用 ::part 为 Shadow DOM 元素设置样式

Styling Shadow DOM elements using ::part

javascript

css

shadow-dom