Live Code::DevDic

TAG
JavaScript
Result
Run
License

window.addEventListener("DOMContentLoaded", () => {
    const aDATA = [
        { 
            name: "아메리카노",
            summary: "아메리카노는 에스프레소를 뜨거운 물로 희석하여 마시는 커피 음료의 한 종류이다."
        },
        {
        	name: "카페라떼",
            summary: "에스프레소에 스팀 우유를 혼합한 커피 음료이다."
        },
        {
            name: "카프치노",
            summary: "카푸치노는 에스프레소, 뜨거운 우유, 그리고 우유 거품을 재료로 만드는 이탈리아의 커피 음료다."
        }
    ];
    
    const $elMenu = document.getElementById("menu");
    const $elTemplateContent = document.getElementById("menu-template").content;
    const $shadowRoot = $elMenu.attachShadow({
    		mode: "open", slotAssignment: "manual"
    	});
    
    aDATA.forEach(record => {
        $shadowRoot.append($elTemplateContent.cloneNode(true));
        let hcSlot = $shadowRoot.querySelectorAll("slot");
        
    	let elTitle = document.createElement("h1");
        elTitle.textContent = record.name;
        
        let elSummary = document.createElement("p");
        elSummary.textContent = record.summary;
        
        $elMenu.append(elTitle, elSummary);

hcSlot[hcSlot.length - 2].assign(elTitle);
        hcSlot[hcSlot.length - 1].assign(elSummary);
    });
});

Console