Live Code::DevDic

TAG
JavaScript
Result
Run
License

document.addEventListener("DOMContentLoaded", () => {
	window.customElements.define(
    	"menu-detail",
        class extends HTMLElement {
        	constructor() {
            	super();
                
                const elTemplate = document.getElementById("menu-template").content;
                
                const shadowRoot = this.attachShadow({ mode: "open" });
                shadowRoot.append(elTemplate.cloneNode(true));
                
                const $nlElMenu = this.querySelectorAll("ul > li");
                const $nlElName = this.querySelectorAll("h2");
                const $nlElSummary = this.querySelectorAll("p"); 
                
                $nlElMenu.forEach(elItem => elItem.addEventListener("click", showDetail));
                
                function showDetail(e) {
                   const $elTarget = e.currentTarget;
                   let menuCode = $elTarget.dataset.menuCode;
                    
                   $nlElMenu.forEach(elItem => elItem.style.backgroundColor = "white");           
                
                   $elTarget.style.backgroundColor = "yellow";
                    
                   $nlElName.forEach(el => {
                       el.removeAttribute("slot");                       
                       
                       if(menuCode == el.dataset.menuCode) {            
                           el.setAttribute("slot", "name");   
                       }
                   });
                    
                   $nlElSummary.forEach(elP => {
                       elP.removeAttribute("slot");                       
                       
                       if(menuCode == elP.dataset.menuCode) {            
                           elP.setAttribute("slot", "summary");   
                       }
                   });
                }
                
                const $elSlotSummary = this.shadowRoot.querySelector("dd > slot");
                $elSlotSummary.addEventListener("slotchange", e => {
                    const aElements = e.currentTarget.assignedElements();
                    console.log(e.currentTarget.name, aElements[0].textContent);
                });                
            }
        }
    );
});

Console