global style doesn't apply on all components in StencilJs

Question

I'm using StencilJs. The problem is I can't use global styles inside shadow=true components. In this section of Docs it explicitly says we can use it for adding font-face and css-reset. But I'm not able to use this feature. it only applies to components with shadow=false

Here is my global.style.scss

body{
  background-color: red;
}

button{
  cursor: pointer;
  border: none;
  box-shadow: none;
  outline: none;
  &:hover, &:focus{
    outline: none;
    box-shadow: none;
  }
}

in stencil.config.ts I have

export const config: Config = {
  namespace: 'areas-power',
  globalStyle: 'src/assets/styles/global.style.scss',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  plugins: [
    sass()
  ]
};

I also added its link to index.html file. style only apply to body tag. it doesn't apply on buttons inside other components. How I can add shared css-reset and font-face to all components in Stencil?

score 0 · Answer 1 · answered Jun 07 '23 at 14:40

No that won't work. The docs state that using :root allows properties to pass through to shadow DOM. button is not :root so it behaves like any other global style. font-face will work because it is an "inherited" property, so the component host element will inherit it from DOM, and the component's shadow elements will inherit it from the host. The normal rules of shadow DOM and CSS property inheritance always apply. See this post for information about inheritable properties: https://stackoverflow.com/a/5612360/9226213. It may also be helpful to know that the default value for background-color is transparent, so although it is not inheriting from parent elements, it would appear to have the same background color.

global style doesn't apply on all components in StencilJs

1 Answers1