问题描述
直到最近，每当我在HTML中需要自定义属性时，我总是使用 HTML5 data- *自定义属性。
最近开始尝试使用 WebComponents ，特别是自定义元素，我开始考虑不是HTML5的自定义属性。 data- *自定义属性。
在不经意间采取任何不推荐的做法之前，我想澄清一下...
在下面的列表中，我们有4个元素：
const toggleDataAttribute = (e) => {
e.target.dataset.inverted = (e.target.dataset.inverted === 'true') ? 'false' : 'true';
}
const toggleCustomAttribute = (e) => {
if (e.target.getAttribute('inverted') === 'true') {
e.target.setAttribute('inverted','false');
}
else {
e.target.setAttribute('inverted','true');
}
}
const toggleInvert = (e) => {
if (e.target.dataset.inverted) {
toggleDataAttribute(e);
}
else {
toggleCustomAttribute(e);
}
}
// Attach click event TO <div> elements
let divs = [...document.getElementsByTagName('div')];
divs.forEach((div) => div.addEventListener('click',toggleInvert,false));
// Attach click event TO <my-circle> elements
let myCircles = [...document.getElementsByTagName('my-circle')];
myCircles.forEach((myCircle) => myCircle.addEventListener('click',false));
// Define <my-circle> element
class myCircle extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({mode: "open"});
}
connectedCallback() {
this.root.appendChild(document.createElement('slot'));
}
}
customElements.define('my-circle',myCircle);aside {
position: absolute;
top: 0;
right: 0;
width: 280px;
line-height: 24px;
}
div {
float: left;
margin: 0 12px 12px 0;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 36px;
border-radius: 50%;
cursor: pointer;
}
my-circle {
display: block;
float: left;
margin: 0 12px 12px 0;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 36px;
background: radial-gradient(#fff,#000);
border-radius: 50%;
cursor: pointer;
}
my-circle:first-of-type {
clear: left;
}
div:nth-of-type(1) {
background: radial-gradient(rgb(255,255,0),rgb(255,0));
}
div:nth-of-type(2) {
background: radial-gradient(rgb(255,rgb(0,163,0));
}
my-circle:nth-of-type(1) {
background: radial-gradient(rgb(255,rgb(223,0));
}
my-circle:nth-of-type(2) {
background: radial-gradient(rgb(255,127,127),0));
}
div[data-inverted="true"],div[inverted="true"],my-circle[data-inverted="true"],my-circle[inverted="true"] {
filter: hue-rotate(180deg);
}<div data-inverted="false">i</div>
<div inverted="false">ii</div>
<my-circle data-inverted="false">iii</my-circle>
<my-circle inverted="false">iv</my-circle>
<aside>
<p><strong>Click</strong> on each of the circles on the left to invert their backgrounds.</p>
</aside>尽管以上设置在技术上是有效的，但以下哪一项是正确的：
-
- 结论：元素 i ， ii ， iii 和 iv 均有效
-
- 结论：元素 i ， iii 和 iv 有效，而 ii 无效
-
C） Data- *属性用于标准元素，自定义属性用于自定义元素。
- 结论：元素 i 和 iv 有效，而 ii 和 iii 无效
-
- 结论：元素 i 和 iii 有效，而 ii 和 iv 无效
已添加：
为说明上述问题，我想举一个例子，说明自定义属性在哪些地方无效：
-
选择文本输入
-
输入：
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
</head>
<body>
<div data-inverted="false">i</div>
<div inverted="false">ii</div>
</body>
</html>
- 检查标记
验证器返回错误：
从第10行第1列开始；到第10行第22列
i</div>↩↩<div inverted="false">ii</di
尽管...我不确定https://validator.w3.org/nu/处的工具是否已过时和/或被抛弃，并且返回的 Error 应该不再被视为2020年的错误（？ ）
解决方法
所有4种用法均有效，为什么它们应该无效？
data-前缀赋予 添加的 奖励，它们在element.dataset中可用。
-属性是属性--自定义元素API中没有什么特别的地方，
除了observedAttributes()。是的，您可以在其中使用data-*属性。
注释
class myCircle extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({mode: "open"});
}
connectedCallback() {
this.root.appendChild(document.createElement('slot'));
}
}
可以写为：
class myCircle extends HTMLElement {
constructor() {
super()
.attachShadow({mode: "open"})
.append(document.createElement('slot'));
}
}
因为super()返回'this'
和attachShadow都是 sets 和 returns this.shadowRoot免费
您对appendChild()返回值不做任何事情，因此append()（可以接受多个参数）就足够了。
还要注意，有一种toggleAttribute方法。