StencilJS 组件样式

Question

ComponentDecorator的stylesoption/property的正确使用方法是什么？将 styles 属性与存储库 stencil-component-starter 中的默认 my-name 组件一起使用似乎不会影响相应组件的样式，也不会生成类似 [=16= 的内容] 标签在 <head> 中。 styles 是如何工作的？或者还没有实施？如果目标是避免需要加载单独的 CSS 资产，但为组件提供样式，那么 styles 是正确的选择还是有另一个属性例如 host 需要使用吗？

下面是从 stencil-component-starter 生成的示例组件]1，其中 stylesUrl @Component 属性替换为 styles 属性并设置 font-size 属性。 dev 或 build 任务期间未生成错误。

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-name',
  styles: `my-name { font-size: 24px; }`
})
export class MyName {

  @Prop() first: string;

  render() {
    return (
      <div>
        Hello, my name is {this.first}
      </div>
    );
  }
}

ComponentDecorator 定义为：

export interface ComponentOptions {
    tag: string;
    styleUrl?: string;
    styleUrls?: string[] | ModeStyles;
    styles?: string;
    shadow?: boolean;
    host?: HostMeta;
    assetsDir?: string;
    assetsDirs?: string[];
}

感谢您提供的任何帮助！

Answer 1

我刚刚尝试了最新的 版本 0.0.6-22，它现在似乎完全可以工作了。

在编译的时候，它会告诉你你的样式内容是否有效（主要是寻找有效的选择器）。

这是一个工作示例（带有一个简单的字符串）：

import { Component, Prop } from "@stencil/core";

@Component({
  tag: "inline-css-example",
  styles: 'inline-css-example { font-size: 24px; }'
})
export class InlineCSSExampleComponent {
  @Prop() first: string;

  render() {
    return <div>Hello, my name is {this.first}</div>;
  }
}

这个也适用，使用 ES6 模板字符串（仅显示多行）：

import { Component, Prop } from "@stencil/core";

@Component({
  tag: "inline-templatestring-css-example",
  styles: `
    inline-templatestring-css-example {
      font-size: 24px;
    }
  `
})
export class InlineCSSExampleComponent {
  @Prop() first: string;

  render() {
    return <div>Hello, my name is {this.first}</div>;
  }
}

（编辑以显示自 0.0.6-13 以来的演变）

StencilJS 组件样式

StencilJS Component Styles

web-component

stenciljs