3

I have we component lets say called orderFlow. Inside there is obviously orderFlow.html template file, orderFlow.js and also I have added orderFlow.css file. Additionally I have created few html templates inside that folder that I render depending on the state of the app lets say. My problem is that when I define some styling rules inside that css file i created, only the default template (with the same name) renders the styles. all the other templates don't apply the styling when they are rendered. If I have created separate css files for each template matching the names of the file it would be ok.

However I have some generic styles that I want to actually to all of the templates and duplicating all these styles for each template seems bad to me. Is there any wy that I could use single css file and target all the templates within my component folder?

2

From winter'20, you can Share CSS style rules.

  1. Create a Lightning web component that contains only a CSS file.

cssLibrary component (with only CSS file):

cssLibrary
   └──cssLibrary.css

/* cssLibrary.css */

h1 {
    font-size: xx-large;
}

In the CSS file of another Lightning web component, import the style rules.

myComponent:

myComponent
   ├──myComponent.html
   ├──myComponent.js
   ├──myComponent.js-meta.xml
   └──myComponent.css

/* myComponent.css */

@import 'cssLibrary.css';

Imported style rules are applied to the template just like non-imported style rules. In the myComponent.html template, the text in the tag uses the xx-large style defined in cssLibrary.css.

<template>
  <h1>Words to the Wise</h1>
  <slot></slot>
</template>
  • Thanks for your response. I understand your point, but wold your solution would target other templates within component. They have different name obviously so if I have imported styles in myComponent.css, the otherTepmlate.html would be targeted as well? – Master Przemo Aug 20 at 10:36
  • no. It would affect only the component in which it is downloaded, not its child components or parents. This is new feature in winter'20, not my point :) – salesforce-sas Aug 20 at 10:37
  • I see. in that component I have couple of other html files (templates). I thought the component.css file would affect all these html files when one of them is rendered since they are just html that reside within myComponent folder or rather they belong to it – Master Przemo Aug 20 at 10:44
  • Every component has shadow DOM by default - created by LWC. So, unless you import the CSS, they will not be affected. – salesforce-sas Aug 20 at 10:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.