[英]Styling Shadow DOM elements using ::part
我正在嘗試使用::part
將 css styles 應用於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
在 shadow 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
將 styles 應用於陰影 DOM span 元素?
必須定義part
屬性:
在您的情況下,它是<span>
元素:
<p is="word-count">
#shadow-dom
<span part="some-box">Words: 120</span>
</p>
(全局) ::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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.