Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/web-widget/vite-plugin-shadow-dom-css
Use CSS files in shadow dom
https://github.com/web-widget/vite-plugin-shadow-dom-css
Last synced: 2 months ago
JSON representation
Use CSS files in shadow dom
- Host: GitHub
- URL: https://github.com/web-widget/vite-plugin-shadow-dom-css
- Owner: web-widget
- License: mit
- Created: 2021-12-27T08:18:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-28T05:05:31.000Z (about 2 years ago)
- Last Synced: 2024-10-02T12:38:10.967Z (4 months ago)
- Language: TypeScript
- Size: 205 KB
- Stars: 20
- Watchers: 1
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - vite-plugin-shadow-dom-css - widget | 16 | (TypeScript)
README
# vite-plugin-shadow-dom-css
Vite Shadow DOM CSS 插件。
虽然 Web Components 充满了希望，但如今要在工程中使用它将会面临非非常多的问题，而样式的工程化首当其冲。Vite 与其他流行构建工具并没有很好的解决这样的问题，而开发社区中只有零星的文章讨论到它，所以这个插件是一次解决问题的尝试。
- 能够将 CSS 插入到 Shadow DOM 中
- 开发环境支持热更新
- 可与 Vite 内置的 CSS 插件配合工作
## Web Components 技术下的 CSS 工程化问题
当你试图使用 Vite 作为构建工具来编写和 Web Components 相关的组件的时候，你会发现样式永远无法生效：
```js
import myStyle from './my-style.css';
export class MyElement extends HTMLElement {
constructor() {
this.attachShadow({ mode: 'open' });
myStyle(this.shadowRoot).mount();
this.shadowRoot.innerHTML = `
Hello world
`;
}
}
customElements.define('my-element', MyElement);
```
```html
/*...*/
#shadow-root
Hello world
```
在开发模式中，我们会在 `` 中得到由 Vite 生成的 ``；在生产模式中，我们将得到 .css 文件，这些 .css 文件需要有我们额外通过 `<link>` 标签输出。这两种模式都不能让 CSS 工作在 Shadow DOM 中，因为 Shadow DOM 是一个隔离的样式环境。
使用这个插件你可以让 CSS 按预期插入到 Shadow DOM 中：
```html
<html>
<head></head>
<body>
<my-element>
#shadow-root
<h1>Hello world</h1>
<style>
/*...*/