shadow-domlit

can lit elements also be used without shadow dom - are there any risks?


we need web components and use lit elements in our web application. however, the dom shadows cause problems not only in the css area (access not possible, no global css sheet).

what is the biggest risk if we simply do without shadow doms?

createRenderRoot() { return this; } is such an easy way - what is the danger / bad effect i dont see?

Thanks and have a nice rest of the week


Solution

  • As for other options, I don't believe that React, or Vue currently have the ability to disable shadow DOM when creating custom HTML elements.

    However, Stencil.js, Svelte, and Angular can all be used to create custom elements without implementing the Shadow DOM. I know that Stencil will also allow you to use slots without the Shadow DOM, but I can't speak for the others.

    The only "risk" that I would advise being aware of is that your global CSS styles can and will bleed into your components.