Javascript 如何正确直观地嵌套HTML自定义元素

我正在尝试编写一个简单的HTML自定义元素，用于在页面上放置树，使用以下简单代码：

<html-tree title="root">
  <tree-node title="child1">
    <tree-node title="leaf1"></tree-node>
    <tree-node title="leaf2"></tree-node>
  </tree-node>
  <tree-node title="child2">
    <tree-node title="leaf3"></tree-node>
    <tree-node title="leaf4"></tree-node>
  </tree-node>
</html-tree>

---

显示了阴影dom的默认样式，其内容为“nothing”，因此要实现真正的嵌套

在上述代码中，除了在

:host>*

上设置边框外，

:host

和

还需要显式标记为块：

setupDOM(shadow) {    
  this.setStyle(`
    :host {
      display: block;
      border: 1px red solid;
    }
    :host > slot {
      display: block;
      border: 1px red solid;
      margin-left: 1em;
    }
  `);
  ...
}

---

不要使用

节点

作为类名，它已经被DOM使用。范围界定使这一点都不是问题。为什么讨论位于：一个非常好的链接，谢谢。编辑答案。