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

Question

我能够构建 vue web 组件并将其加载到其他页面，但我找不到如何正确包含 UI 框架的文档。 Web 组件似乎在 shadowDOM 下，使用样式标签导入 css 将不起作用。

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

对任何框架、Vuetify 或 Ant Design 或 Tailwind CSS 的任何提示将不胜感激。

类似问题：

Answer 1

使用没有阴影的自定义元素 DOM 是微不足道的。只需像传统方式一样添加即可。然而，有了 Shadow DOM，事情就变得棘手了。只有可继承的 CSS 样式通过阴影 DOM。其他一切都被阻止。如果该库仅公开全局 CSS.

，则无法直接与现有设计系统（Vuetify、Ant 等）集成

如果设计系统或组件库公开样式，即 css 单个组件的文件，那么您可以稍作努力。

最好的解决方案是使用constructable stylesheet. You can use a bundler like Webpack to load the stylesheet for individual component (if and only if it is provided) as a string and feed it to the stylesheet constructor method as illustrated here。

// 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 将样式公开为单个文件而不是一个全局文件的假设。

或者，浏览器已经开始支持 Shadow DOM 内的 link 标签。但是，如果您有单个组件的样式，它再次非常有用。详细了解 that here。

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

How to build web component with styling library using vite and vue 3?

vue.js

web-component

vite