如何解决澄清WebComponents中HTML自定义元素中的自定义属性的状态
直到最近,每当我在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
方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。