如何使用 vite 和 vue 3 构建带有样式库的 Web 组件？

Question

我能够构建 vue Web 组件并将其加载到其他页面中，但我找不到如何正确包含 UI 框架的文档。看来 Web 组件位于 ShadowDOM 下，并且使用样式标签导入 css 不起作用。

（在模板中添加CDN链接并应用样式）

任何有关任何框架、Vuetify 或 Ant Design 或 Tailwind CSS 的提示都将受到赞赏。

类似的问题：Vuetify构建为Web组件样式未显示

Answer 1

在没有 Shadow DOM 的情况下使用自定义元素很简单。只需按照传统方式添加即可。然而，对于 Shadow DOM，事情就变得棘手了。只有可继承的 CSS 样式才能通过 Shadow DOM。其他一切都被阻止。如果该库仅公开全局 CSS，则无法直接与现有设计系统（Vuetify、Ant 等）进行直接集成。

如果设计系统或组件库正在公开css各个组件的样式（即文件），那么您可以通过一些努力来实现。

最好的解决方案是使用可构造的样式表。您可以使用 Webpack 之类的捆绑器将单个组件的样式表（当且仅当提供时）作为字符串加载，并将其提供给样式表构造函数方法，如此处所示。

// Read SCSS file as a raw CSS text using Webpack/Rollup/Parcel
import styleText from './my-component.scss';

const sheet = new CSSStyleSheet();sheet.replaceSync(styleText);

// Use the sheet inside the web component constructor
shadowRoot.adoptedStyleSheets = [sheet];

然而，Firefox 和 Safari 尚未实现它。

如果你需要后备，那么有些方法就不那么干净了。方法是一样的。将 CSS/SCSS 作为字符串导入并使用模板文字，将其添加到元素的内部style标记中。

import styleText from 'ant/button.css';

class FancyComponent extends HTMLElement {

  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });

    shadowRoot.innerHTML = `
      <!-- Styles are scoped -->
      <style>
        ${styleText}
      </style>
      <div>
        <p>Hello World</p>
      </div>
    `;
  }
}

customElements.define('fancy-comp', FacyComponent);

这一切都依赖于 ant/material/veutify 将样式公开为单个文件而不是一个全局文件的假设。

或者，浏览器已经开始支持linkShadow DOM 内的标签。但如果您有单个组件的样式，它又非常有用。在这里阅读更多相关内容。