StencilJS 组件可以使用外部主题吗？

Question

我正在尝试使用 StencilJS 为我正在处理的多个项目创建可重用的 Web 组件。但是我很难将颜色主题从我的主要应用程序继承到，比方说，我的 Stencil 按钮组件。示例：我想为应用在我的 Stencil 组件（如原色按钮）上的应用程序使用不同的原色和二次色。但是我该怎么做呢？我正在使用 sass 样式，并在我的 Stencil 项目中使用我的主题本地设置了主要变量。但是我不知道如何在编译后导入外部sass/css文件。

<my-button color="primary">This is a primary button</my-button>

Answer 1

在 Styling 文档的底部有一个关于如何使用 CSS 变量的部分：

In this example we have defined a CSS Variable called --app-primary-color that is set to the color #488aff. The :root selector in this example is a CSS pseudo selector that defines the variable on the root element of your project (usually <html>) so that the variable can be used across your app.

因此，如果您有这样的按钮组件：

@Component({ tag: 'my-button', styleUrl: 'button.css' })
export class Button {
  render() {
    return <div class="button"><slot /></div>;
  }
}

下面的button.css：

.button {
  background: var(--primary-color, tomato);
  color: var(--light-color, white);

  display: block;
  padding: 1em 2em;
  border-radius: 0.2em;
  font-family: sans-serif;
  text-align: center;
  text-transform: uppercase;
}

然后您可以通过在 CSS:

中的某处设置变量来覆盖所有按钮颜色

:root {
  --primary-color: mediumseagreen;
}

CSS 也可以使用 Javascript 设置变量，甚至可以通过 Stencil 为旧版浏览器填充这些变量。

JSFiddle 示例：http://jsfiddle.net/5fv9r6e1/

顺便说一句，在你的组件装饰器中你也可以设置 shadow: true 来启用 Shadow DOM，然后你可以使用 :host 选择器并且不需要包装 div 在这个例子中：

@Component({ tag: 'my-button', styleUrl: 'button.css', shadow: true })
export class Button {
  render() {
    return <slot />;
  }
}

css:

:host {
  background: var(--primary-color, tomato);
  color: var(--light-color, white);

  display: block;
  padding: 1em 2em;
  border-radius: 0.2em;
  font-family: sans-serif;
  text-align: center;
  text-transform: uppercase;
}

Ionic 4 经常使用这个概念，所以可能值得看看他们的 Stencil 组件：https://github.com/ionic-team/ionic/tree/master/core/src/components

Answer 2

一个选项是在定义组件时关闭阴影 DOM。这将允许您的 Web 组件从正在使用该组件的应用程序继承 CSS。

@Component({
  tag: 'shadow-component',
  styleUrl: 'shadow-component.css',
  shadow: false
})

StencilJS 组件可以使用外部主题吗？

Can StencilJS component use external theming?

sass

web-component

stenciljs