不使用影子dom的定制元素是否提供了與使用影子dom的web組件(自主定制元素)相同的封裝樣式？

關(guān)于使用定制元素的MDN頁面以及github上的示例沒有明確說明。

不，沒有shadowDOM的自定義元素是DOM元素，就像其他的一樣& ltdiv & gt或者& ltp & gt或者任何元素。

只有影子根為CSS(或id屬性)提供了范圍 您可以在組件外部使用以下內(nèi)容對其進行樣式化:

CSS屬性 *零件 主題 Web組件是不同的技術(shù) 模板 自定義元素 陰影世界 兩者都可以單獨使用

您可以對常規(guī)DOM元素應(yīng)用shadowRoot:

document . query selector(& quot；DIV & quot).attach shadow({ mode:& quot；打開& quot})

這不會使它們成為自定義元素，但會提供有作用域的CSS

你只在需要的時候添加暗影王國。(唉，許多圖書館強迫你使用暗影王國)

另外請注意，你完全可以自由地創(chuàng)建任何你想要的標簽。

<pie-chart>
  <slice size="90" stroke="green">HTML</slice>
  <slice size="1"  stroke="red">JavaScript</slice>
  <slice size="9"  stroke="blue">CSS</slice>
</pie-chart>

& lt餅圖& gt是Web組件/自定義元素，并且& ltslice & gt不是(也不可能是)。

查看我的開發(fā)博客帖子:

https://dev . to/dannyengelman/what-web-technologies-is-required-draw-a-pie-chart-in-2021-spoiler-alert-a-standard-web-component-will-do-1j 56

https://dev . to/dannyengelman/we B- components-using-unknown html elements-for-better-semantic-html-5d 8 c