使用 lit-html 用 Shadow DOM 封装自定义元素的 CSS答案

【问题标题】：Encapsulate CSS of custom element with Shadow DOM using lit-html使用 lit-html 用 Shadow DOM 封装自定义元素的 CSS
【发布时间】：2020-02-14 06:43:20
【问题描述】：

试图使一些css 仅适用于使用Shadow DOM 的自定义元素。对于渲染，我使用lit-html。

有什么想法吗？或者其他一些方法来完成没有阴影的封装？

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <script type='module' src="script.js"></script>
  <title>LitComponent</title>
</head>
<body>
<lit-component></lit-component>
<p>not styled</p>
</body>
</html>

import { html, render } from "./node_modules/lit-html/lit-html.js";

class LitComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'})
  }

  connectedCallback() {
    let style = document.createElement('style');
    style.innerHTML = `
    p {
      font-size: 80px;
    }
    `
    this.shadowRoot.appendChild(style);
    render(this.createView(), this);
  }

  createView() {
    return html`
      <p> styled </p>
    `;
  }
}
customElements.define("lit-component", LitComponent);

强文本

我希望我的LitComponent 中的“样式化”段落使用font-size: 80px; 进行样式化，而不是普通标记段落。

但实际上，像这样附加阴影时，它根本没有渲染我的组件。

【问题讨论】：

我建议查看lit-element，这是使用lit-html 编写Web 组件的好方法。
@abraham 会的，谢谢

标签： javascript css shadow-dom custom-element lit-html

【解决方案1】：

解决了

render(this.createView(), this.shadowRoot);

【讨论】：