WIP: Hide the host until all Light or Shadow DOM blocking links are loaded,

[tomalec]

https://github.com/Starcounter/starcounter-include/issues/93

Done:

• [x] Support light and Shadow DOM,
• [x] opt-out capabilities with async attribute,
• [x] Cover race condition between resources load and changing composition or content,
• [x] Prepare for default custom-element styles Web Platform feature

Doubts:

1. [x] I'm still not sure whether it's better to implement [loading-content],[loading-presentation] using attributeChangedCallback, as this is a cost in run-time. I thought about alternative solution, which adds <style>:host([loading-content]),:host([loading-presentation]){visibility:hidden !important;}</style> to the shadow root. But then we would have to update BlendingEditor to ignore it while observing and changing element.shadowRoot, update partialToStandaloneHTMLProvider to include it as well, and what is worse require all existing composition to be updated. @alshakero, @warpech WDYT? - Decided to go with [loading-content],[loading-presentation] to minimize migration burden.

Still missing:

• [x] tests,
• [ ] Edge support, for stamping light DOM styles (potentially a separate issue)
• [ ] Full support for <enlighted-link> (potentially a thing to fix there)
• [ ] README notes

[alshakero]

I don't think the attributeChangedCallback is that expensive. It's way cleaner and more straight forward. I vote for it.

[tomalec]

Added tests for this feature.

Turns out there is potentially problematic issue with Edge, HTML Imports polyfill and stamping styles from light DOM.

[tomalec]

Limited scope of functionality is covered in less problematic PR at https://github.com/Starcounter/starcounter-include/pull/111

[warpech]

For reference, can you say what is the problematic part that is skipped in PR #111 and what is the consequence of it being skipped?

[tomalec]

1. Controlling the load timing when stamping <link rel="stylesheet"> to the light DOM in Edge, as HTML Imports polyfill does some trick to disable it, and does not enable it back, either due to a bug in polyfill or for a reason.

Therefore, as we skipped support for light dom links, we will have FOUC when links are added to content part.

2. Controlling the load timing of created <link rel="import"> when stamping <enlighted-link> to shadow DOM. Sometimes the load event is not called and I couldn't find out why.

By skipping this case, we will have FOUC of custom elements which definitions or styles are loaded from shadow DOM/presentation part. Plus, FOUC of light DOM styles which are loaded using <enlighted-link rel="stylesheet"> stated in presentation part.

[tomalec]

Hopefully https://github.com/Juicy/imported-template/pull/59 will unlock light DOM styling as well.