Is it possible to protect legacy html within "sl-dialog|sl-include" from external styles?

[trailsnail]

Hi,

I am working on rebuilding our company CMS toolbar.
Until now clicking a button in the toolbar opens an action within an iframe.
For example: edit properties of a cmspage.

I removed the ugly frame with its layout and use now <sl-include> within a sl-dialog.
But now the content loaded is affected by customers CSS from outside the page, because there is no protection like iframe before.

Sure I know, that there is some layout work todo, to get the reloaded content styled without beeing affected by CSS from outside.

But now the interesting question: is it possible to save the the content within <sl-dialog> or sl-inlcude from styles outside and apply only styles set for elements within their containing Shoelace components?

[claviska]

It's not possible to do with <sl-include>. The included content is added to the light DOM by design so you can style it. Otherwise, you wouldn't have any way to target it with arbitrary content. This works for most uses cases — just not yours.

If there's a strong need for it, you can do something like this: https://jsfiddle.net/mpq6j08d/

But know that your ability to style things from the outside will still be very limited. If you go that route, you'll probably want to add your own styles for spacing and other customizations: https://jsfiddle.net/mpq6j08d/1/

And if this is what you're looking for, it's really a higher-level component so I'd suggest going with LitElement to create it. 😄

[trailsnail]

Thanks for the examples. Basis for further thoughts. 👍