web-component - Stenciljs:动态加载 styleUrl

Question

我正在使用 stenciljs 构建一个 web 组件，我希望能够基于名为 theme 的属性加载 css 主题文件。

@Component({
  tag: 'pm-header',
  styleUrl: 'pm-header.scss',
  shadow: true
})

export class PmHeader {

  @Prop() theme: string = 'default';

  ...

  render() {
    return (<nav class={this.theme}></nav>)
  }
}

Answer 1

我知道这已经晚了，但这应该可以帮助其他人，因为它没有记录在案，我只是花了很多时间来弄清楚。以下代码允许您的自定义组件使用“模式”属性来确定加载的样式。
第一步:在您的组件定义中定义多个 styleUrls(又名“模式”)。我使用的是“dark”和“default”——但你可以定义任意数量的。例如，ionic 使用“ios”和“md”。

@Component({
    tag: 'my-component',
    styleUrls: {
        default: 'my-component.default.pcss',
        dark: 'my-component.dark.pcss',
    },
})
export class MyComponent { ... }

第 2 步:创建样式文件(通常具有共享的通用样式):

my-component.common.css

  :host { display: block }

my-component.default.css

  @import './my-component.common.css';
  :host { color: black }

my-component.dark.css

  @import './my-component.common.css';
  :host { background: black; color: white }

第 3 步:更新您的 stencil.config.ts 以使用 globalScript:

export const config: Config = {
    namespace: 'mycomponent',
    globalScript: './src/globals/global.ts',
    ...
}

第 4 步:创建全局脚本并定义一个“setMode”函数，如下所示:

import { setMode } from '@stencil/core';

setMode(elm => {
    // NOTE: you can write whatever you want here - it's up to you. This
    // function must return one of the style "modes" defined in step 1.
    return (elm as any).mode || elm.getAttribute('mode') || 'default';
});

第 5 步:像这样使用您的自定义组件:

<!-- default mode -->
<my-component />
<my-component mode="default" />

<!-- dark mode -->
<my-component mode="dark" />

您可以自定义 setMode用于确定模式的函数 - 例如，您可以在 window 上查找属性，或检查元素上的 className。由你决定。上面只是一个简单的例子，它允许您在元素上使用“模式”属性……如果没有指定，则回退到“默认”。