Collect `<link/>` elements from custom elements and move them to `<head>`

sjorsrijsdam commented 1 year ago

Enables the use case where custom elements use the <link/> element to load, prefetch, preconnect, etc to external resources.

<link/> elements are collected and deduplicated as are <style> and <script> elements.
Deduplication is done by generating the element's HTML after sorting the attributes and using that HTML as the key in the collection object, ensuring that the order of the attributes makes no difference

kristoferjoseph commented 1 year ago

EDIT: I went for a walk to think through the implications of this PR and it occurred to me that as long as we dedupe; as you did, and do not strip the link tags from the template in the browser then this is actually a good addition.

This is not able to be merged because it will break the use case of linking an external css stylesheet for use in a component that leverages the Shadow DOM.

Since Shadow DOM enabled components do not have access to stylesheets linked in the host page we sometimes need to also add a link inside the component in order to leverage a cached styleguide stylesheet.

And yes, Shadow DOM is annoying. Is there another way we could accomplish the intent of this PR?

sjorsrijsdam commented 1 year ago

Problems that resolve themselves are my favorite kind of problems 😄 If this however does present issues in the future, don't hesitate to ping me either here or on Discord

enhance-dev / enhance-ssr

Collect `<link/>` elements from custom elements and move them to `<head>` #47