search

vuejs / vue-web-component-wrapper

(Vue 2 only) Wrap a Vue component as a web component / custom element.
1.05k stars 100 forks source link

Disable Shadow DOM #20

Open manfredsteyer opened 6 years ago

manfredsteyer commented 6 years ago

Is there a way to disable Shadow DOM like in karol-f/vue-custom-element?

cristovao-trevisan commented 6 years ago

Look at #17 , it won't be merged since it does not support slots, but you can use my fork (npm i git+https://git@github.com/cristovao-trevisan/vue-web-component-wrapper.git). You can also try to make it work, if you have the guts :smile:

manfredsteyer commented 6 years ago

Thanks for this info. Do you know, is this topic on vue's roadmap?

EduJura commented 5 years ago

Hi @cristovao-trevisan,

Is there a way to pass the disable shadow option as a flag using Vue-CLI? Something like:

"build-wc": "vue-cli-service build --target wc --name [prefix-name] --enable-shadow-dom [false] 'src/components/**/*.vue'",

Thanks in advance!

cristovao-trevisan commented 5 years ago

Not that I know of, my current solution is to copy/paste the styles I need to the component

sylvainpolletvillard commented 5 years ago

Copy pasting the styles to the component is not ideal.

I try to compile Buefy components to web components, but the styles come from an external stylesheet (Bulma). Once the components are in shadow DOM, all the external styles do not apply anymore.

I know this is by design, but Custom Elements are a great way to share this kind of components and it would be great if we could disable Shadow DOM.

erhard commented 4 years ago

Need this feature urgent . Has anybody an idea what to do ?

prochorz commented 4 years ago

I need it too!

cristovao-trevisan commented 4 years ago

If you're not using slots, you can use my fork (https://github.com/cristovao-trevisan/vue-web-component-wrapper), else you'll need to rewrite this package

mato2000 commented 3 years ago

Hi @cristovao-trevisan, I've found you PR 17 very useful since I need that the web component can be transversable from de window.document, and this works fine. Did you had any issue with the injected styles? Did you find a way solve it? Thanks!

cristovao-trevisan commented 3 years ago

You can't use external styles in shadow dom, but disabling it will break slots. There is no good solution for this. If you do not need slots you can always use my fork (or copy paste the code into your codebase).

Web components should use shadow dom (Shadow DOM is one of the three Web Component standards), so there is no ultimate solution for this library to include external CSS.

Like I said above, my solution was to find which CSS the component is using (easy to do with dev tools) and copy/paste it into the web component. No ideal, but works without breaking an internet standard

icsaba commented 2 years ago

any update?

rajeevverma076 commented 1 year ago

Any update on how to use external styles in shadow dom?