3

So standard LWC disallows importing global styles and the shadow-dom encapsulation prevents CSS from "leaking" from the global/parent scope-

There are some ways to get around this with Web Components: using @import statements for example - but I was just curious if anyone has noticed that in Salesforce gets around this for components hosted on their own platform-

<template> <style> @import '../ causes import errors for me in LWC.dev environment,

What is the recommended way to inject global-styles in LWC.dev, does one exist yet?

LWC Playground

2
  • What's the question, exactly? How to use global CSS injection in LWC dev?
    – sfdcfox
    Feb 9, 2020 at 18:30
  • @sfdxfox yes, updating for clarification Feb 9, 2020 at 19:34

1 Answer 1

5

You can use CSS imports in LWC but the size of the files that can be imported is quite limited. This is due to technical limitations of the parsers that the build tool uses. If you use large files like a library, you'll see parsing errors.

The temporary workaround for LWC Open Source is to enable synthetic shadow DOM to allow global stylesheets to leak to child components.

All you need to do is to add this import as the first import in client/index.js

import '@lwc/synthetic-shadow';

I insist on the fact that this solution is not future proof since synthetic shadow DOM is a polyfill that brings shadow DOM for browsers like IE11. Once IE11 is no longer supported, the framework will switch to standard shadow DOM and drop synthetic shadow DOM.

3
  • thank you that makes sense. Feb 9, 2020 at 20:12
  • So... is there anything that's going to work in the long term? Basically, LWC open source is pretty useless unless we can apply a global stylesheet. Feb 26, 2020 at 17:11
  • There are two problems here: issues with the CSS transpiler that LWC uses that doesn't support large files and a more general issue on how Web Components can be styled. The goal of the Shadow DOM is to step away from these global stylesheets but that will take time since CSS frameworks are not ready for that yet. It will all get sorted eventually but will take time.
    – POZ
    Feb 26, 2020 at 17:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .