Javascript HTML5自定义元素-添加伪类

我正在开发一个自定义HTML类，它可以作为一种额外的表单类型，支持与

[name]

和

[value]

属性匹配的任何元素

但是，在扩展类时，我发现我无法使伪select

：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中的
：无效的
选择器。如何将
：is selectors
添加到我的新类中？
从我读到的所有内容来看，您不能将CSS中的
：无效的
选择器用于自定义元素。但您可以根据有效性设置
无效
属性，然后改用
[无效]
选择器

尝试将代码更改为以下内容：


get valid（）{
return！this.hasAttribute（'invalid'）；
}
设置有效（值）{
如果（值）{
此.removeAttribute（'invalid'）；
}
否则{
此.setAttribute（'invalid'），''；
}
}
目前，web组件规范中有一个建议的添加项，允许添加自定义伪元素