<body> <figure-info src="https://qidian.qpic.cn/qidian_common/349573/ee4ff8502c09c020ce5e90d6a41b4c32/0" text="杨帆dom基础26"></figure> </body> <script type="text/javascript"> "use strict"; var console = window.console; // Create a class for the element class FigureInfo extends HTMLElement { constructor() { // Always call super first in constructor super(); // Create a shadow root const shadow = this.attachShadow({mode: ‘open‘}); // Create div const div = document.createElement(‘div‘); div.setAttribute(‘class‘, ‘figure‘); // Create p const p = document.createElement(‘p‘); p.textContent = this.getAttribute(‘text‘); // Create img const img = document.createElement(‘img‘); img.src = this.getAttribute(‘src‘); // Create some CSS to apply to the shadow dom const style = document.createElement(‘style‘); style.textContent = ` .figure { position: relative; width: 400px; height: 200px; } .figure img { width: 100%; height: 100%; object-fit: cover; } .figure p { font-size: 20px; color: #FFF; position: absolute; left: 0; right: 0; bottom: 0; line-height: 60px; background-color: #000; text-align: center; margin: 0; } `; // Attach the created elements to the shadow dom shadow.appendChild(style); shadow.appendChild(div); div.appendChild(img); div.appendChild(p); } } // Define the new element customElements.define(‘figure-info‘, FigureInfo); </script> </body>
原文：https://www.cnblogs.com/popeyesailorman/p/10589529.html