search

webcomponents / polyfills

Web Components Polyfills
BSD 3-Clause "New" or "Revised" License
1.15k stars 165 forks source link

Support for <link rel="stylesheet"> child of <shady-css-scoped-element> #218

Open cdata opened 5 years ago

cdata commented 5 years ago

It would be nice if <shady-css-scoped-element> could make a best-effort attempt to apply light transforms to the CSSOM of a <link rel="stylesheet"> child when possible. The main use case would be to support authors loading distributable CSS libraries like Bootstrap, which are frequently loaded from CORS-permissive CDNs.

Consider the following example, where Bootstrap is loaded via <link> and a Shadow DOM-using custom element is present on the page: https://pushmatrix.github.io/temp/bootstrap

In IE11, Bootstrap is loaded and its progress bar styles intrude on similarly-styled nodes in the custom element's shadow root (see https://github.com/GoogleWebComponents/model-viewer/issues/840 for additional details and discussion related to this example).

In cases like this, it would be really nice to be able to instruct authors to simply wrap the <link> tag like so:

<shady-css-scoped-element>
   <link rel="stylesheet" href="...">
</shady-css-scoped-element>

A lot of mileage could be gained by applying very light styling to libraries like this, perhaps omitting complex transforms like those for custom properties and @apply.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.