(I'm late to this party, sorry) I'm really fond of the <link rel="import" elements="x-foo, x-bar"> pattern, but I yeah, you could end up with a massive elements list.
How about making link[rel=import] async by default, but make elements with a dash in the tagname display:none by default? On a news article with components, the news article would load, the content would be readable, then the components would appear as they load. Similar to images without a width & height specified. As with images, the site developer could apply styling for the component roots before they load, to avoid/minimise the layout change as components load. This could be visibility:hidden along with a width & height (or aspect ratio, which I believe is coming to CSS), or display:block and additional styles to provide a view of the data inside the component that's good enough for a pre-enhancement render. This gives us: * Performance by default (we'd have made scripts async by default if we could go back right?) * Avoids FOUC by default * Can be picked up by a preparser * Appears to block rendering on pages that are build with a root web component Thoughts? Cheers, Jake.
