2b:null 2c:["$","title",null,{"children":"npm:ucd-full | jleedev | Observable"}] 31:T83f,PopUpInfo = customElementHelper( class PopUpInfo extends HTMLElement { static tag = "popup-info"; constructor() { // Always call super first in constructor super(); // Create a shadow root const shadow = this.attachShadow({ mode: "open" }); // Create spans const wrapper = document.createElement("span"); wrapper.setAttribute("class", "wrapper"); const icon = document.createElement("span"); icon.setAttribute("class", "icon"); icon.setAttribute("tabindex", 0); const info = document.createElement("span"); info.setAttribute("class", "info"); // Take attribute content and put it inside the info span const text = this.getAttribute("data-text"); info.textContent = text; // Insert icon let imgUrl; if (this.hasAttribute("img")) { imgUrl = this.getAttribute("img"); } else { imgUrl = "https://raw.githubusercontent.com/mdn/web-components-examples/main/popup-info-box-web-component/img/default.png"; } const img = document.createElement("img"); img.src = imgUrl; icon.appendChild(img); // Create some CSS to apply to the shadow dom const style = document.createElement("style"); console.log(style.isConnected); style.textContent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20px; left: 10px; z-index: 3; } img { width: 1.2rem; } .icon:hover + .info, .icon:focus + .info { opacity: 1; } `; // Attach the created elements to the shadow dom shadow.appendChild(style); console.log(style.isConnected); shadow.appendChild(wrapper); wrapper.appendChild(icon); wrapper.appendChild(info); } } )32:T4f0,PopUpInfo2 = customElementHelper( class PopUpInfo extends HTMLElement { static tag = "popup-info"; constructor() { super(); const shadow = this.attachShadow({ mode: "open" }); let imgUrl; if (this.hasAttribute("img")) { imgUrl = this.getAttribute("img"); } else { imgUrl = "https://raw.githubusercontent.com/mdn/web-components-examples/main/popup-info-box-web-component/img/default.png"; } const wrapper = htl.html`

${this.getAttribute( "data-text" )}`; const style = htl.html`