我用的是StencilJs。問題是我不能在shadow=true組件中使用全局樣式。 在這部分文檔中，它明確地說我們可以用它來添加字體和css-reset。但是我不能使用這個功能。它僅適用于shadow=false的組件

這是我的global.style.scss

body{
  background-color: red;
}

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

我有

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()
  ]
};

我還添加了它到index.html文件的鏈接。樣式僅適用于正文標簽。它不適用于其他組件內(nèi)部的按鈕。如何在模板中的所有組件中添加共享的css-reset和font-face？

不，那不行。文檔聲明使用:root允許屬性傳遞給影子DOM。button不是:root，所以它的行為和其他g lobal樣式一樣。font-face將工作，因為它是一個& quot繼承的& quot屬性，因此組件宿主元素將從DOM繼承它，組件的影子元素將從宿主繼承它。影子DOM和CSS屬性繼承的一般規(guī)則總是適用的。看到這個職位的信息可繼承的財產(chǎn):https://stackoverflow.com/a/5612360/ 9226213。知道background-color的默認值是透明的也是有幫助的，因此盡管它不是從父元素繼承的，但它看起來有相同的背景色。