模板样式设置

如何直接在静态 styles 模板属性中添加组件专属的作用域样式。

由于客户端模板属于 Web Components，因此其内容位于 shadow DOM 内。按设计，shadow DOM 定义了一个与全局样式隔离的本地样式作用域。欲了解更多信息，请参阅 Shadow DOM Styling。

您可以直接在静态的 styles 模板属性中添加组件专属的作用域样式。

Source code

my-view.ts
import { css, html, LitElement } from 'lit';

class MyView extends LitElement {

  static get styles() {
    return css`
      :host {
        /* <my-view> 主机元素的样式 */
        display: block;
      }

      .my-view-title {
        font-weight: bold;
        border-bottom: 1px solid gray;
      }
    `;
  }

  render() {
    return html`
      <h2 class="my-view-title">My view title</h2>
    `;
  }
}

customElements.define('my-view', MyView);

若希望在客户端模板中应用您的 Application Theme（应用程序主题），请使用 applyTheme() 工具函数，如下所示：

Source code

my-view.ts
import { css, html, LitElement } from 'lit';
import { applyTheme } from 'Frontend/generated/theme';

class MyView extends LitElement {

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <h2 class="my-view-title">My view title</h2>
    `;
  }
}

customElements.define('my-view', MyView);

如果您想在模板中避免使用 shadow DOM，请以下列方式创建它：

Source code

TypeScriptimport { css, html, LitElement } from 'lit';

class MyView extends LitElement {
  protected override createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <h2 class="my-view-title">My view title</h2>
    `;
  }
}

customElements.define('my-view', MyView);

不含 shadow DOM 的模板，可以使您的应用程序主题直接作用于模板内部的元素。

42AE001F-6D1F-456E-B072-27B883C19920

Docs

Docs

模板样式设置