Gathering detailed insights and metrics for vite-plugin-shadow-dom-css
Gathering detailed insights and metrics for vite-plugin-shadow-dom-css
Installations
npm install vite-plugin-shadow-dom-cssDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=12.0.0
Node Version
16.14.0
NPM Version
8.3.1
Releases
Unable to fetch releases
Languages
2
TypeScript
JavaScript
TypeScript (77.93%)
JavaScript (22.07%)
Developer
web-widget
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
22 Stars
30 Commits
2 Forks
1 Watchers
1 Branches
2 Contributors
Updated on Apr 18, 2025
Maintainers
1
Package Meta Information
Latest Version
0.0.2
Package Id
vite-plugin-shadow-dom-css@0.0.2
Unpacked Size
28.23 kB
Size
7.08 kB
File Count
9
NPM Version
8.3.1
Node Version
16.14.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
vite-plugin-shadow-dom-css
Vite Shadow DOM CSS 插件。
虽然 Web Components 充满了希望，但如今要在工程中使用它将会面临非非常多的问题，而样式的工程化首当其冲。Vite 与其他流行构建工具并没有很好的解决这样的问题，而开发社区中只有零星的文章讨论到它，所以这个插件是一次解决问题的尝试。
- 能够将 CSS 插入到 Shadow DOM 中
- 开发环境支持热更新
- 可与 Vite 内置的 CSS 插件配合工作
Web Components 技术下的 CSS 工程化问题
当你试图使用 Vite 作为构建工具来编写和 Web Components 相关的组件的时候，你会发现样式永远无法生效：
1import myStyle from './my-style.css'; 2export class MyElement extends HTMLElement { 3 constructor() { 4 this.attachShadow({ mode: 'open' }); 5 myStyle(this.shadowRoot).mount(); 6 this.shadowRoot.innerHTML = ` 7 <h1>Hello world</h1> 8 `; 9 } 10} 11customElements.define('my-element', MyElement);
1<html> 2 <head> 3 <style> 4 /*...*/ 5 </style> 6 </head> 7 <body> 8 <my-element> 9 #shadow-root 10 <h1>Hello world</h1> 11 </my-element> 12 </body> 13</html>
在开发模式中，我们会在 <head> 中得到由 Vite 生成的 <style>；在生产模式中，我们将得到 .css 文件，这些 .css 文件需要有我们额外通过 <link> 标签输出。这两种模式都不能让 CSS 工作在 Shadow DOM 中，因为 Shadow DOM 是一个隔离的样式环境。
使用这个插件你可以让 CSS 按预期插入到 Shadow DOM 中：
1<html> 2 <head></head> 3 <body> 4 <my-element> 5 #shadow-root 6 <h1>Hello world</h1> 7 <style> 8 /*...*/ 9 </style> 10 </my-element> 11 </body> 12</html>
基本示例
添加插件
1// vite.config.js 2import { defineConfig } from 'vite' 3import shadowDomCss from 'vite-plugin-shadow-dom-css' 4 5export default defineConfig({ 6 plugins: [shadowDomCss()] 7})
引入 CSS 文件
引入 CSS，并且增加查询参数 style-provider。
1import myStyle from './my-style.css?style-provider'; 2 3export class MyElement extends HTMLElement { 4 constructor() { 5 this.attachShadow({ mode: 'open' }); 6 this.shadowRoot.innerHTML = '<h1>Hello world</h1>'; 7 myStyle(this.shadowRoot).mount(); 8 } 9} 10customElements.define('my-element', MyElement);
引入 Vue 文件的 Style
在 .vue 单文件中，在 <style> 上增加 style-provider 属性即可。
1<template> 2 <div class="index"> 3 <h1>style-provider demo</h1> 4 </div> 5</template> 6 7<script></script> 8 9<style style-provider> 10 .index h1 { 11 font-weight: normal; 12 } 13</style>
查询 CSS
支持使用虚拟模块 virtual:style-provider?query=${query} 查询 CSS：
${query} 支持的语法：
*: 通配符,: 分割符~: 当前包的根目录
示例：
1// 所有样式 2import allStyle from `virtual:style-provider?query=*`; 3// 当前包下的所有样式 4import packageAllStyle from `virtual:style-provider?query=~/*`; 5// 指定多个样式 6import selectStyle from `virtual:style-provider?query=@ui/dialog/*,@ui/button/*`; 7 8allStyle(document.head).mount(); 9packageAllStyle(document.head).mount(); 10selectStyle(document.head).mount();
只能查询之前被导入的 CSS，请确保 CSS 引入的顺序是正确的。
No vulnerabilities found.
No security vulnerabilities found.