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?

1 Answer 1


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

  • So if I load the styles in the connectedCallback() or renderedCallback() methods, it will be scoped then?
    – Rozgonyi
    Jul 2, 2019 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, 2019 at 17:08
  • @Renji-xD So how to scope the CSS file?
    – Swapnadip
    Feb 22, 2023 at 20:33

You must log in to answer this question.

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