lit-element：constructor() 中 ul 元素的 appendChild 呈现在错误的 dom 位置

Question

正在尝试创建一个 lit-element 封装的待办事项列表。第一步，尝试创建一个 ul 元素，然后在每次单击按钮时附加一个 li 元素。
虽然我可以通过在 Web 组件之前的 html 中预先创建锚点 ul 元素来实现它，但我不想这样做。我希望所有功能都包含在 Web 组件中。
下面是一个合并的 html 文件（包括 lit-element 脚本），显示了我尝试过的几种方法。
- 如果我在构造函数中创建了 ul 元素，那么我就能够成功地附加 li 元素。但是，它们位于错误的位置（在 html 部分中组件之后的其他元素之后）。
- 如果我在 render() 的 html 模板文字中创建 ul 元素，则按钮点击不起作用（导致错误 "uncaught typeerror, cannot read property 'appendChild' of null"）。

为什么这些实现不起作用？我什至试图将它分成两个不同的 Web 组件，其中第一个组件只负责创建 ul，但我得到了相同的 "appendChild of null" 错误。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p>(1) from html - before litelement component</p>
  <raf-demo></raf-demo>
  <p>(2) from html - after litelement component</p>
</body>

<script type="module">
  import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element.js?module';

  class rafDemo extends LitElement {
    constructor() {
      super();
      var el = document.createElement("ul");
      el.id = "button1";
      el.innerHTML = "Why after (2)? From the component constructor(), I need something that fires only once and renders before render(), outputting between (1) and (2).";
      document.body.appendChild(el); 
    }
    render() {
      return html`
      <ul id="button2">from component in render() - correctly renders inbetween</ul>
      <button @click="${this.button1}">Add li: works, but after (2)</button>
      <button @click="${this.button2}">Add li: should be between (1) and (2), but error</button>
      `;
    }
    button1(event) {
      const li = document.createElement('li');
      li.textContent = "text";
      document.getElementById('button1').appendChild(li);
    }
    button2(event) {
      const li = document.createElement('li');
      li.textContent = "text";
      document.getElementById('button2').appendChild(li);
    }
  }
  customElements.define('raf-demo', rafDemo);
</script>
</html>

感谢您的帮助！

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p>(1) from html - before litelement component</p>
  <raf-demo></raf-demo>
  <p>(2) from html - after litelement component</p>
</body>

<script type="module">
  import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element.js?module';

  class rafDemo extends LitElement {
    constructor() {
      super();
      var el = document.createElement("ul");
      el.id = "button1";
      el.innerHTML = "Why after (2)? From the component constructor(), I need something that fires only once and renders before render(), outputting between (1) and (2).";
      document.body.appendChild(el); 
    }
    render() {
      return html`
      <ul id="button2">from component in render() - correctly renders inbetween</ul>
      <button @click="${this.button1}">Add li: works, but after (2)</button>
      <button @click="${this.button2}">Add li: should be between (1) and (2), but error</button>
      `;
    }
    button1(event) {
      const li = document.createElement('li');
      li.textContent = "text";
      var elem = this.shadowRoot.getElementById('button2').appendChild(li);
   this.shadowRoot.appendChild(elem);
    }
    button2(event) {
      const li = document.createElement('li');
      li.textContent = "text";
      document.getElementById('button2').appendChild(li);
    }
  }
  customElements.define('raf-demo', rafDemo);
</script>
</html>

lit-element：constructor() 中 ul 元素的 appendChild 呈现在错误的 dom 位置

lit-element: appendChild of ul element in constructor() renders in wrong dom position

javascript

lit-element

lit-html