salesforce / lwc

⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
https://lwc.dev
Other
1.63k stars 394 forks source link

Allow <link> tag in component templates #1582

Closed luminixinc closed 5 years ago

luminixinc commented 5 years ago

Is your feature request related to a problem? Please describe.

We would like to <link> a global stylesheet directly in various someComponent.html files.

Currently the template-compiler explicitly disallows this.

Describe the solution you'd like

In our version of the template-compiler, we simply remove this tag from the blacklist and compiled components appears to work just fine and be styled properly.

Describe alternatives you've considered

We've played around with adding the contents of the global stylesheet to each someComponent.css that needs it, but this blows up the code size pretty quickly.

Additional context

The context here is that we're compiling LWC for offline embedding in the Pulsar for Salesforce mobile app. So possibly this should only be an option for the LWC OSS compiler.

caridy commented 5 years ago

The problem here is about synthetic shadow (and IE11). Specifically, the problem that in synthetic mode we can't have the link in the synthetic shadow per instance, causing a significant difference between the markup in native vs synthetic, it messed up with the position of the elements, the result of querySelectors, etc. So, we are being very careful here. The proper way to do this is by importing a CSS only module in the .css file for every component that needs this to be inserted. This is not a big deal, and the perf of it should be very good. If you're seeing something weird, size blow up etc... that's unexpected. We need more info about what are you doing.

luminixinc commented 5 years ago

Ok this makes sense. Sounds like a feature for a future date when IE11 is fixed or no longer a factor.

caridy commented 5 years ago

@luminixinc we are still interested in looking at the problem that you described when using import. Can you share more details? or you already figured it out?