Question

我很好奇是否可靠地定义自己的元素并使用JavaScript或JQuery选择它们。

我遇到了问题"Are custom elements valid HTML5?"，但我对一个半生不熟的规范不感兴趣，也没有正式的方法来定义我自己的元素。

我只是想知道，例如我是否使用

<orange-juice />

在我的文档中尝试选择它（通过CSS，通过jQuery），如此

orange-juice.fresh

它可以跨浏览器工作（当然，它是否可能由HTML5规范的一部分支持，明确允许这样做？）

编辑：跨浏览器，如IE9 +和主流桌面浏览器。

编辑：也许橙汁示例有点误导，就像提到CSS一样。我不想创建自己的语义元素，也不想真正想要设置内容样式，我想附加一些元信息然后由脚本解释。它同样可以是一个带有数据属性的空div，但我觉得<my-meta-element />比<div id="i-am-just-an-innocent-fill-in-carrying-some-information-which-does-not-have-anything-to-do-with-me-being-a-generic-block-displayed-element"></div>

更好。

Answer 1

HTML5不支持所有元素都是“有效”，因此它不适用于某些浏览器。甚至WAI-ARIA也不是很久以前变得有效了，更不用说自定义标签了。但是，这并不意味着您无法使用它们。这个问题很有帮助：Is there a way to create your own html tag in HTML5?

Answer 2

如果您只想在元素上存储数据，可以使用自定义属性（尽管它不具有您期望的XML类型语法）：

如下所示：

<div id="orange" data-fresh="true"></div>

然后你可以用JS选择它：

var orange, fresh;
orange = document.getElementById("orange");
fresh = orange.getAttribute("fresh");

Answer 3

目前有一个规范正在允许开发人员编写自己的元素。 This new feature is called "Web Components"，默认情况下，任何浏览器都不支持这样做。

因此，虽然这可能不是直接的实际答案，但如果您计划保持自定义元素向前兼容，那么开始形式化自定义元素将是有利的。

就定义自己的元素而言，现代浏览器会忽略它们无法识别的任何元素，但是您可以将CSS display样式添加到自定义元素中，这将告诉浏览器该元素应该被渲染以某种方式。这是故意的，以便旧版浏览器可以使用新元素。

要支持旧版本的IE，您需要在IE识别该元素之前调用document.createElement('custom-element-name')。

基本上，要创建<example>元素，您需要执行以下操作：

<!doctype html>
<html>
<head>
    <title>example element</title>
    <script>document.createElement('example');</script>
    <style>
        example {
            display: block;
        }
    </style>
</head>
<body>
    <example></example>
</body>
</html>

HTML中的自定义元素

3 个答案: