Closed luminixinc closed 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.
Ok this makes sense. Sounds like a feature for a future date when IE11 is fixed or no longer a factor.
@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?
Is your feature request related to a problem? Please describe.
We would like to
<link>
a global stylesheet directly in varioussomeComponent.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.