HTML创建自定义标签

HTML创建自定义标签

网上找了找案例,但是都有问题

1. 这里归纳一下方法
2. 处理在案例中发现的坑

依托HTMLElement创建

class tagName extends HTMLElement { }

如果是组件,并且有自己的结构,推荐创建shadow-root
如果内部结构由用户自定义,则不需要额外处理

this.attachShadow({ mode: 'open' })

元素需要在构造体中创建,元素需要在构造结束后填充

创建完成后定义给 customElements 后就可以在页面上使用了
下面是完整代码

class tagName extends HTMLElement {
	constructor() {
		super()

		/**
		 * 创建文本框
		 */
		let textBox = document.createElement('span')
		textBox.setAttribute('class', 'info')
		// 此时文本框的内容没有被填充,需要保留
		this.textBox = textBox

		/**
		 * 创建图标模块
		 */
		let img = document.createElement('img')
		img.setAttribute('class', 'img')
		this.img = img

		let icon = document.createElement('span')
        icon.setAttribute('class', 'icon')
        icon.appendChild(img)

		/**
		 * 创建css样式
		 */
        var style = document.createElement('style');
        style.textContent =
            `   
                span {
                    display: block;
                }
                .wrapper {
                    position: relative;
                    display: flex;
                    align-items: center;
                }
                img {
                    width: 1.2rem;
                    display: block;
                }
                .icon:hover + .info, .icon:focus + .info {
                    opacity: 1;
                }
            `
        // 创建根元素，作用其实是将分离的css和html聚合起来
        let shadow = this.attachShadow({ mode: 'open' });
        // 创建一个span标签包裹内容
        let wrapper = document.createElement('span');
        wrapper.setAttribute('class', 'wrapper');

		// 将创建的style节点追加到影子节点中
		shadow.appendChild(style);
		// 依次将html按照层级关系添加
		shadow.appendChild(wrapper);
		wrapper.appendChild(icon);
		wrapper.appendChild(textBox);
	}

	connectedCallback() {
		// 获取自定义标签的text属性
        var text = this.text()
        this.info.textContent = text

        // 创建图片元素
        var imgUrl;
        if (this.hasAttribute('img')) {
            imgUrl = this.imgUrl()
        } else {
            imgUrl = 'https://tvax3.sinaimg.cn/crop.0.0.1008.1008.50/00726IOgly8gdipc86qp0j30s00s075m.jpg?KID=imgbed,tva&Expires=1589255252&ssig=8m%2BzaU%2BjJW';
        }
        this.img.src = imgUrl
	}
	
	imgUrl() {
        return this.getAttribute('img')
    }

    text() {
        return this.getAttribute('text')
    }
}
customElements.define('tag-name', tagName)

<tag-name img="https://himg.bdimg.com/sys/portraitn/item/f8c3c1f5b8dfb7e5353137388e1a" text="文字"></tag-name>