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

尝试创建一个封装了lit元素的todo列表。作为第一步，尝试创建一个ul元素，然后在每次单击按钮时附加一个li元素
尽管我可以通过在web组件之前在html中预创建anchor-ul元素来实现这一点，但我不想这样做。我希望整个功能都包含在web组件中
下面是一个合并的html文件(包括lit元素脚本(，显示了我尝试的几种方法。
- 如果我在构造函数中创建ul元素，那么我就可以成功地附加li元素。但是，它们位于错误的位置(在html部分中组件后面的其他元素之后(
- 如果我在render((的html模板文本中创建了ul元素，那么按钮点击就不起作用(导致错误为"未捕获的typeerror，无法读取null的属性‘appendChild’"(

为什么这些实现不起作用？我甚至试图将其分解为两个不同的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>

感谢您的帮助！

<!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>

相关内容

最新更新

热门标签：