我想创造类似的东西
<menu>
<lunch>
<dish>aaa</dish>
<dish>bbb</dish>
</lunch>
<dinner>
<dish>ccc</dish>
</dinner>
</menu>
可以在HTML5中完成吗？我知道我可以做到
<ul id="menu">
<li>
<ul id="lunch">
<li class="dish">aaa</li>
<li class="dish">bbb</li>
</ul>
</li>
<li>
<ul id="dinner">
<li class="dish">ccc</li>
</ul>
</li>
</ul>
但它的可读性低得多:(
使用类似的东西document.getElementByTagName,你几乎可以创建自己的元素.
<arial>Hello</arial>
然后在JS ..
var a = document.getElementsByTagName("arial");
for(i = 0; i < a.length; ++i)
a[i].style.fontFamily = "Arial"
我们有一个自定义元素,容易peasy.
我的问题归结为,这是一种不好的做法吗？有没有我不注意的缺点？
据我所知,在HTML5中组成标签名称是完全合法的,并且它们可以像CSS样式和嵌套一样正常工作.
当然,我的任意标签名称对浏览器没有任何影响,浏览器不理解它们,但它使我的代码更具可读性,这使得它更容易维护.
那么我为什么不在页面上使用任意标签名称？它会影响SEO吗？会破坏什么吗？
重要编辑:与http://ejohn.org/blog/html5-shiv/一起使用时,较旧的浏览器不会窒息不受支持的标签
我有一个名为的自定义HTML5标记<scroll-content>.实际上,我的HTML文件中的某些位置的框架会为我创建并插入此标记.现在我想修改这个标签的CSS,所以在我的CSS文件中我去了:
scroll-content{
overflow: hidden;
}
它做了它应该做的,但这是设计自定义标签的正确方法吗？
我不能为它们添加一个类,因为我没有创建标签,框架没有,所以我无法在我的代码中访问它们,我想避免使用Javascript来查找这些标签并以这种方式添加类.
我更愿意了解修改自定义标签的标准/最安全的方法.
在Web组件中使用自定义HTML元素时,我是否仍应使用前缀命名自定义属性data？
例如:
<!-- Should form be data-form? -->
<my-button form="foo">click me</my-button>
我很好奇是否可靠地定义自己的元素并使用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>
我刚开始用自定义元素,并根据此文章,自定义的元素可以被定义如下:
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () { ... };
proto.enteredViewCallback = function () { ... };
document.register('x-foo', {
prototype: proto
});
这在我的chrome浏览器中效果很好,每次创建新元素时都会调用'createdCallback'.
现在,如果我查看这里的官方文档,我没有看到,例如,在任何地方提到的createdCallback.有人理解W3C文档并可以解释为什么会这样吗？
此外,从Web组件查看自定义元素,它们看起来完全不同.所以现在有两种不同类型的自定义元素.这没有任何意义,或者这两者是否可以共存？
鉴于目前的HTML5规范,允许创建自定义HTML元素(只要他们的名称中包含一个破折号),而事实上,Web组件似乎是一个功能,在这里留下来,我想知道为什么是创建自己的自定义HTML元素不满意？
请注意,我不是在问是否使用Web组件 - 它仍然是一个移动目标,即使像Polymer这样的大型polyfill也可能尚未准备好进行生产.我问的是创建自己的自定义HTML标记并设置样式,而不需要附加任何JS API.
<template>
<header>
<hamburger></hamburger>
<app-title></app-title>
<lives></lives>
</header>
</template>
<script>
export default {
name: 'Titlebar',
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
@import "../styles/variables";
header {
padding: $padding-titlebar;
position: relative;
}
lives {
position: absolute;
right: 2.5vh;
}
</style>
是否可以像任何常规 HTML 标签一样使用组件标签来实现样式目的，就像我在 中写下的那样lives { }？
我发现在 css 中编写<lives class="lives">和使用.lives { }是可行的，但这似乎有点多余，如果可以只使用组件标签，宁愿省略添加其他类。
我知道 Vue 编译<lives>成 HTML 代码，并且编译后的 css 没有“lives”标签可供使用，但仍然想知道。