HTML5 element

index.html

<script>
window.onload = function(){
    var Name = document.registerElement("name-div",{
        prototype: Object.create(HTMLDivElement.prototype,{
            createdCallback: {
                value: function(){
                    this.shadow = this.createShadowRoot();
                }
            },
            attributeChangedCallback: {
                value: function(a,b,c){
                    if(a=="name"){
                        this.shadow.innerHTML = `<p>我叫 ${c}</p>`;
                    }
                }
            }
        })
    })
    "小红 小黑".split(" ").map((n)=>{
        var t = new Name();
        t.setAttribute("name", n)
        document.body.appendChild(t);
    })
}
</script>