我正在处理自定义HTML类,该类可用作支持与[name]
和[value]
属性匹配的任何元素的其他类型的表单。
但是,在扩展课程时,我发现我无法使伪选择:invalid
正常工作。
class HTMLInlineInputElement extends HTMLElement{
constructor(){
super();
this.addEventListener('input', function(event){
this.value = this.innerHTML;
})
}
connectedCallback(){}
get name(){
return this.getAttribute('name');
}
set name(value){
return this.setAttribute('name', value);
}
get value(){
return this.getAttribute('value');
}
set value(value){
return this.setAttribute('value', value);
}
get valid(){
return this.validity.valid;
}
set valid(value){
return this.validity.valid = value;
}
checkValidity(){
if( this.hasAttribute('required') && this.value == null || this.value.length == 0 ){
console.log('req');
this.valid = false;
} else if( this.hasAttribute('pattern') && this.value.match( this.getAttribute('pattern') ) ){
console.log('patt');
this.valid = false;
}
}
}
if( typeof customElements !== 'undefined' ){
customElements.define('inline-form', HTMLInlineFormElement);
customElements.define('inline-input', HTMLInlineInputElement);
} else {
document.createElement('inline-form', HTMLInlineFormElement);
document.createElement('inline-input', HTMLInlineInputElement);
}
简而言之:我想在我的类中添加HTMLElement.invalid = true;
功能,以便在CSS中使用:invalid
选择器。如何将:is-selectors
添加到我的新班级?
答案 0 :(得分:1)
从我读过的所有内容中,您无法使用CSS中的:invalid
选择器来获取自定义元素。但您可以根据有效性设置invalid
属性,然后使用[invalid]
选择器。
尝试将代码更改为以下内容:
get valid(){
return !this.hasAttribute('invalid');
}
set valid(value){
if (value) {
this.removeAttribute('invalid');
}
else {
this.setAttribute('invalid'), '');
}
}
答案 1 :(得分:0)
目前,对Web组件规范的建议添加允许添加自定义伪元素。 You can track the discussion (any maybe help move it forward) on GitHub