Shadow DOM supports the use of <link> tags to load styles that are scoped in the same way as a style declared with <style> which is very convenient but comes with the issue that styles are applied only when they are ready and while the styles are being loaded there is FOUC that can't be prevented with the :defined pseudo selector of custom elements for example. Another problem I have encountered is measuring elements inside the shadow root when the custom element gets constructed or connected because the "real" dimensions are known after the style sheet is loaded and applied, something that I don't know when will happen(maybe the ResizeObserver will help when implemented?)
Can anyone think of a clever way to get around those issues(without inlining the styles manually or with a build step)? Does my concern make sense? Can it be seen as a bug given that <link rel="stylesheet> in the <head> block rendering and this feature should be analogous to that?
If you want to avoid FOUC, you should hide the element until the style is applied. You can know when your style is loaded when you use fetch or XMLHttpRequest, or <link onload=...>.
About the dimension issue, it's not specific to Shadow DOM but a consequence of the CSS architecture.
Anyway, it is often recommended to set the with and height of an element to avoid FOUC but also to avoid full page redraw and so to speed up rendering.
Note that <link rel="stylsheet"> support in Shadow DOM is very new, so maybe it will not work as expected in all browsers.