在 Light DOM 中应用样式的指南

sniper2025-02-13 15:13

在 Light DOM 中应用样式的指南

当你使用 LitElement 并将 createRenderRoot 方法改为返回 this 时，组件的内容会在 Light DOM 中渲染，而不是 Shadow DOM。这意味着 static styles 属性将不再自动应用。以下是如何在 Light DOM 中应用样式的步骤。

解决方案

1. 手动将样式添加到全局范围

你可以在组件的生命周期方法中，将样式动态插入到文档的 <head> 中。

示例代码

typescript 复制代码

import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import styles from '../../assets/location-modal.css?inline' assert { type: 'css' };

@customElement('location-modal')
export class LocationModal extends LitElement {
  @property({ type: Boolean }) open = false;

  createRenderRoot() {
    return this;
  }

  connectedCallback() {
    super.connectedCallback();
    this._injectStyles();
  }

  private _injectStyles() {
    const styleElement = document.createElement('style');
    styleElement.textContent = styles;
    document.head.appendChild(styleElement);
  }

  render() {
    return html`
      <div class="modal-overlay" style=${this.open ? 'display: flex;' : 'display: none;'} @click=${this._close}>
        <div class="modal-content" @click=${(e: Event) => e.stopPropagation()}>
          <slot></slot>
          <button @click=${this._close}>关闭</button>
        </div>
      </div>
    `;
  }

  private _close() {
    this.open = false;
  }
}

2. 直接在 HTML 中引入样式

如果样式文件是独立的 CSS 文件，可以直接在 HTML 中通过 <link> 标签引入。

注意事项

样式冲突：将样式添加到全局范围可能会导致样式冲突，特别是在大型应用中。确保样式选择器足够具体以避免冲突。
性能考虑 ：在大型应用中，频繁地向 <head> 添加样式可能会影响性能。确保只在必要时添加样式。

通过这些步骤，你可以在 Light DOM 中应用样式，同时保持组件的功能。