场景

2023年08月11日

柏拉文

越努力，越幸运

一、自定义元素

---

1. 在 Custom Element 构造函数中,添加 let shadow = this.attachShadow({mode: 'open'}); 代码, 即可将一个 Shadow DOM 附加到 Custom Element 上

   • let shadow = this.attachShadow({mode: 'open'}); : 它接受一个配置对象作为参数，该对象有一个 mode 属性，值可以是 open 或者 closed

     • mode: 'open': 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM

     • mode: 'closed': 表示不可以从外部获取 Shadow DOM 了

2. 将 Shadow DOM 附加到一个元素之后，就可以使用 DOM APIs 对它进行操作，就和处理常规 DOM 一样

3. 最后,使用 customElements.define 定义新的 Custom Elements

实现:

class Bolawen extends HTMLElement {
    constructor() {
        super();

        const shadow = this.attachShadow({ mode: "open" });

        const container = document.createElement("div");
        container.setAttribute("class", "bolawen-container");

        const content = document.createElement("div");
        content.setAttribute("class", "bolawen-content");
        content.innerHTML = this.getAttribute("content");

        const style = document.createElement("style");
        style.textContent = `
            .bolawen-container{
                width:100px;
                height:100px;
                background-color: red;
                display:flex;
                justify-content:center;
                align-items:center;
            }
            .bolawen-content{ 
                width:50px;
                height:50px;
                background:black;
                text-align:center;
                font-size:12px;
                color:3px;
            }
        `;

        shadow.appendChild(style);
        shadow.appendChild(container);
        container.appendChild(content);
    }
}

customElements.define("bolawen-div", Bolawen);

二、日期选择框

---

三、音频播放标签

---

语法

<audio src="file/123.mp3" controls="controls">

原理: 浏览器在解析 audio 标签的时候, 会自动在 audio 下添加一个 ShadowDOM , 而 audio 就是 Shadow DOM 的宿主标签, Shadow DOM 中封装了所有的内容和样式

四、视频播放标签

---