如何在带ShadowDOM的WebComponent中使用UIKit外部样式类？

ShadowDOM默认会隔离外部样式，因此你在index.html中引入的UIKit样式无法直接作用到组件内部元素。要让组件内的<p>标签使用uk-text-bold类并继承UIKit样式，可通过以下两种方法实现：

方法一：在ShadowDOM内部引入UIKit样式 #

直接在组件模板中添加<link>标签加载UIKit的CDN资源，让组件内部能识别UIKit的类样式：

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

    const html = `
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/css/uikit.min.css">
      <style>
        .foo {
          color: red;
        }
      </style>

      <p class="foo uk-text-bold">test</p>
    `;

    this.shadowRoot.innerHTML = html;
  }

  connectedCallback() {}
}

customElements.define('live-search-comenzi-clienti', liveSearchComenziClienti);

修改后，<p>标签同时拥有自定义的.foo类和UIKit的uk-text-bold类，即可应用加粗样式。

方法二：复用外部已加载的UIKit样式表 #

如果不想重复加载UIKit资源，可以复用页面中已加载的样式表，通过adoptedStyleSheets将其添加到ShadowDOM中：

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

  connectedCallback() {
    // 等待外部样式加载完成后获取UIKit样式表
    const uikitStyleSheet = Array.from(document.styleSheets).find(sheet => 
      sheet.href?.includes('uikit')
    );

    // 创建自定义样式
    const customStyle = document.createElement('style');
    customStyle.textContent = `
      .foo {
        color: red;
      }
    `;

    // 合并样式到ShadowDOM
    const styleSheets = [];
    if (uikitStyleSheet) styleSheets.push(uikitStyleSheet);
    styleSheets.push(customStyle.sheet);
    this.shadowRoot.adoptedStyleSheets = styleSheets;

    // 创建并添加p元素
    const p = document.createElement('p');
    p.className = 'foo uk-text-bold';
    p.textContent = 'test';
    this.shadowRoot.appendChild(p);
  }
}

customElements.define('live-search-comenzi-clienti', liveSearchComenziClienti);

这种方法避免了重复请求UIKit资源，但建议在connectedCallback中处理，确保外部样式表已完成加载。

内容的提问来源于stack exchange，提问作者user9172014