(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.

Reply via email to