scr*_*avy 5 html css tags jquery html5
我很好奇是否可靠地定义自己的元素并使用JavaScript或JQuery选择它们.
我遇到过"自定义元素是否有效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>
目前正在制定一项规范，允许开发人员创作自己的元素。这个新功能称为“Web 组件”，在撰写本文时默认情况下任何浏览器都不支持该功能。
因此，虽然这可能不是直接的实际答案，但如果您打算保持自定义元素向前兼容，那么开始形式化自定义元素将是有利的。
至于定义您自己的元素，现代浏览器将忽略它们无法识别的任何元素，但是您可以将 CSSdisplay样式添加到自定义元素，这将告诉浏览器该元素应该以某种方式呈现。这是故意的，以便旧的浏览器可以使用新元素。
document.createElement('custom-element-name')为了支持旧版本的 IE，您需要在 IE 识别该元素之前调用。
基本上，要创建一个<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>