web-widget / vite-plugin-shadow-dom-css Goto Github PK

View Code? Open in Web Editor NEW

19.0 19.0 2.0 210 KB

Use CSS files in shadow dom

License: MIT License

TypeScript 77.93% JavaScript 22.07%

vite-plugin-shadow-dom-css's Introduction

Web Widget

It is a web application framework designed to give new impetus to all front-end frameworks.

⚠️ This project is undergoing internal testing and may have unknown problems.

Features

Fast

Use web streaming to accelerate page display; server-side components reduce client-side JS, streaming State and selective hydration to reduce lag.

Flexibility

It does not come with a new technology stack, but it can drive UI technology stacks such as React and Vue at the same time, and provides performance optimization methods at a higher level.

Web standards

The project is designed to comply with the standards set by WinterCG, it can run in Node.js and Edge environments. The client supports native ESM and Importmap, and is compatible with Chrome 67+.

Technology stack interoperability

Different technology stacks are isolated through component container technology. For example, React components can be embedded in Vue components, and Vue components can also introduce React components.

vite-plugin-shadow-dom-css's People

Contributors

Stargazers

Watchers

Forkers

anncwb kinglisky

vite-plugin-shadow-dom-css's Issues

Can't get it to work with vue

This package seems to do exactly what i need for my vue project, but i can't get it to work. I'm not sure if i missed something or if it's not compatible with the versions that i'm using?

I use vue-shadow-dom to add my shadow root.

Any help would be much appreciated. I can add an english readme to your project if you want and if i get it to work. Thanks a lot in advance!

Dependencies

"@vitejs/plugin-legacy": "^2.0.0",
"@vitejs/plugin-vue2": "^1.1.2",  
"sass": "^1.58.3",  
"vite": "^3.0.2",  
"vite-plugin-shadow-dom-css": "^0.0.2",  
"vue": "^2.7.7",  
"vue-shadow-dom": "^1.6.0"

vite.js

...
export default defineConfig({
    plugins: [
        vue2(),
        legacy({
            targets: ["ie >= 11"],
            additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
        }),
        shadowDomCss(),
    ],
    ...
}
...

main.js (Entry Point)

import Vue from "vue";
import { createPinia, PiniaVuePlugin } from "pinia";
import Shadow from "vue-shadow-dom";

import App from "./App.vue";

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

Vue.use(Shadow);

new Vue({
    render: (h) => h(App),
    pinia,
}).$mount("#app");

App.vue

<template>
    <shadow-root>
        <div class="app">
            test
        </div>
    </shadow-root>
</template>

<style style-provider>
.app {
    background-color: #f00;
}
</style>

README in English

Difficult to read

nested component doesn't get their <style> append to my ShadowRoot

Hello,
first : you made a great Job with this plugin !.

My concern: imagine the 'home' route with its home.vue component, home.vue has its own internal navigation with the <RouterView /> component.
The problem is that all components inside sub-route of home will have their style attached to <head> instead of my shadowRoot.
I specify that I added <style style-provider></<style> to all my *.vue component.

a snippet of my Vue app's main file (Vue V3.2 with TypeScript, Vite 2.9.13)

import allStyle from 'virtual:style-provider?query=*';
...
let targetShadow = document.getElementById(`mytargetApp`);
const shadowRoot = targetShadow.attachShadow({ mode: 'open' });
allStyle(shadowRoot).mount();
...

Shareable CSS between shadow DOM instances

Thanks a lot for your work on this plugin. We just started using it for our Chrome extension.

Our extension stack is Vite + Tailwind + Svelte. It injects buttons on every list item of a specific website. Each button is an instance of a Svelte component that is mounted to a shadow DOM.

The generated Tailwind CSS will be the same for all buttons, instead of injecting CSS inline using the <style> tag, would it be possible to reference a stylesheet using <link href="..." rel="stylesheet" />.

Error in the docs for vite.config.js

there is an error in the docs for the vite.config.js file.

export default defineConfig({ plugins: [shadowDomCss()] })

Should be
export default defineConfig({ plugins: [shadowDomCss.default()] })