是否可以独立于自定义元素中的 innerHTML 来操作显示的 DOM？

Question

在我看来，“自定义元素”应该能够做到这一点。

是否可以使用 JS 的customElements创建完全自定义的元素，这样渲染的图像完全由 JS 指定（最好是在 HTML 中），而不一定与 DOM 的innerHTML相关

来自标准 HTML 的例子

以现有 HTML 代码为例， <li>元素的 DOM innerHTML不代表其渲染形式。

在 Firefox 上，它在 Inspector 中显示如下：

<li>
  ::marker
  List item
</li>

例子

如果我想要的是可能的，就可以创建一个自定义的<li> ，它的行为如下：

鉴于 HTML

<my-li>Statement</my-li>

在内部，浏览器会生成这个：

<div tag="my-li">
    <img selector="marker" src="bullet.svg"/>
    Statement
</div>

然后，您可以像这样访问项目符号：

my-li::marker { }

检查员因此会显示：

<my-li>
  ::marker
  Statement
</my-li>

同样，想象一下：

<duplicate-div><button>X</button></duplicate-div>

在内部由类似的东西表示

<div tag="duplicate-div">
    <div selector="first">
        <button>X</button>
    </div>
    <div selector="second">
        <button>X</button>
    </div>
</div>

动机（请不要告诉我该怎么做）：

我想制作一个复选框，因为设置默认复选框的样式几乎是不可能的，并且希望使用它就像编写一样简单

<check-box>Label</check-box>

---

这样的事情可能吗？

Answer 1

您可以创建自定义元素并使用 JavaScript 为其提供自定义功能。如果您想要custom-li ，可以从此处使用此代码。 同样非常重要，您可以使用此处说明的list-style访问::marker 。