Stencil: Shadow DOM support

[adamdbradley]

Add an option to @Component to enable shadow DOM support.

[adamdbradley]

Additionally, when a component is connected, have it check if it already within a shadow dom element, and if so change it's strategy on how it inserts the styles and use of slot.

[oliverzy]

how does ssr work with shadow dom?
As far as I know, shadow dom cannotbe serialized to string.

[Hotell]

Additionally, when a component is connected, have it check if it already within a shadow dom element, and if so change it's strategy on how it inserts the styles and use of slot.

Whoa that would be super cool !

how does ssr work with shadow dom?
As far as I know, shadow dom cannotbe serialized to string.

It doesn't :) but smart people from @skatejs @treshugart already solved it. Check out https://github.com/skatejs/ssr

I guess stencil could leverage it within it's compiler, or build own machinery for that ( stencil already provides prerender, so you get all content within "shadow" in statical html page, and when js kicks in, it will re-hydrate the page. )

Similar principle is used in skatejs/ssr .

Also you can declaratively declare shadow dom via <shadowroot> which is in discussion to make it natively to the html spec https://github.com/whatwg/dom/issues/510

[mistyharsh]

I belive it is already possible with shadow property on @Component decorator. #93

[adamdbradley]

@Hotell Yeah that's awesome! With our existing compiler, renderer and css parsing, adding this all shouldn't be too difficult and has been in mind from the beginning. Pretty exciting stuff and love all the awesome work and innovation skatejs has done.

@mistyharsh Yeah we'll be adding this under the shadow property, but it won't work yet until this next phase is done.

[adamdbradley]

Added in https://github.com/ionic-team/stencil/commit/2f20cd00a8fd5f15c6c71f667a9a1109ce0703d7