我有這個代碼，我想使用一個CSS框架，如UIKit。在index.html，組件將被使用，我插入了UIKit cdn。我如何使用類& quotuk-text-bold & quot；在p標簽上并從父標簽的框架中獲取樣式？

class liveSearchComenziClienti extends HTMLElement {
constructor() {
    super()
    this.attachShadow({ mode: 'open' });

    const html = `
        <style>
            .foo {
                color: red;
            }
        </style>

        <p class="foo">test</p>
    `;

    this.shadowRoot.innerHTML = html;
}

    connectedCallback() {

    }
}

custom elements . define(' live-search-comen zi-clienti '，liveSearchComenziClienti)；

鑒于shadowdom的全部目的是將腳本與父dom隔離，那么它不能使用父dom的資源，就像父dom不能使用shadowdom的資源一樣。

底線是，您必須通過再次添加第三方資源文件將它們視為兩個獨立的DOM，就像在父文件中一樣...

const html ='

      <link rel="stylesheet" type="text/css" href="somelib.css">

        <style>
            .foo {
                color: red;
            }
        </style>
    
        <p class="foo">test</p>
    ';

    this.shadowRoot.innerHTML = html;
}

旁注:

直到幾個月前，所有這些網站都在使用shadowdoms，但現在大多數似乎已經放棄了...不知道為什么，但我很想知道。

我得到這個列表的原因是因為我正在開發一個詢問暗影王國等的工具，我瀏覽了數百個網站才找到這些。

www.theguardian.com
www.standard.co.uk
www.reddit.com
www.irishtimes.com
www.abc.net.au/news
www.news.com.au
part-theme.glitch.me
www.mirror.co.uk
www.youtube.com

如果在建立和使用你的shadowdom后，你發現了一些不可預見的缺點或技術問題，請給我寫信，謝謝support@theclassictools.com

我不是說我能解決這樣的問題，但是我需要知道是什么導致了這種放棄，謝謝。