时间戳

首页 > 解决方案 > 是否可以在自定义元素中独立于 innerHTML 操作显示的 DOM？

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

问题描述

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

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

来自标准 HTML 的示例

以现有 HTML 代码为例，<li>元素的 DOMinnerHTML并不代表其呈现的形式。

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

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

例子

如果我想要的是可能的，则可以创建一个 custom <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>

这样的事情可能吗？

标签： javascripthtmlcsscustom-element

解决方案

您可以创建自定义元素并使用 JavaScript 为其提供自定义功能。如果你想要一个，你可以从这里custom-li使用这个代码。同样非常重要的是，您可以访问这里解释的内容。::markerlist-style

推荐阅读