将内容放置在自定义元素内作为组件输入的首选方法？

Answer 1

发生这种情况是因为您的样式位于 Web 组件之外！

要修复它，只需将

@highlight.js

的脚本放入您的组件即可！

  render() {
    if (this.language) {
      return html`
      <link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css" />
      <h1>Hello</h1>
      <pre><code class="language-${this.language}">${unsafeHTML(
        this._code
      )}</code></pre>
    `;
    }

    return html`
    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css" />
    <h1>Hello</h1>
    <pre><code>(${unsafeHTML(this._code)})</code></pre>
    `;
  }