consider stamping the templates inside the shadow root of the renderer

[valdrinkoshi]

It would enforce style encapsulation, and force content styling via <style> inside the <template>.
Pros: prevents accidental style leaks
Cons: allows styling of the shadow root

[Saulis]

As for motivation for this, it makes sure styles which are targeted for the overlay contents are always scoped correctly. No matter in which part of the DOM the overlay renderer is appended to styles always work as expected.

This would allow styling the shadow root contents, and the overlay <div id="overlay"> could be accidentally subjected to some generic styles applied to div for example. So we might need to add another shadow root layer inside the renderer that will encapsulate only the template contents and wrap that inside the <div id="overlay">

[valdrinkoshi]

@Saulis I'm working on this on #6, mind taking a look? The idea is to create an element if we find a <style> in the content template. Like this we can get the best out of both: if styling encapsulation is required, just put an empty <style> element in the content template.
WDYT?

[Saulis]

LGTM 👍