1

I have a LWC that is loading a bootstrap stylesheet and a custom stylesheet CSS static resources using the loadStyle() method but when I load them it is applying the style to the entire page that LWC is sitting in. Is there anyway to just scope those files to the LWC without changing the content of the file itself?

5

No that should not be possible without manually scoping the css file. All the Styles Encapsulation for LWC is done at runtime by the engine during intial style loads

2
  • So if I load the styles in the connectedCallback() or renderedCallback() methods, it will be scoped then?
    – Rozgonyi
    Jul 2 '19 at 17:02
  • no - that doesn` matter. The LWC Engine takes all the styles you have defined at compile time and when an instance of your component is added to the dom a template function is executed which scopes all of the rules. When you are loading a style via loadStyle Method a simple link tag will be added to the page head which loads the stylesheet as-is without any further modification - which is the reason why its applied page wide
    – Renji-xD
    Jul 2 '19 at 17:08

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.