TAG
JavaScript
Result
Run
License
<template id="flower-details-template"> <style> summary > div:nth-child(1) { display: inline-block; } summary > div:nth-child(2) { display: block; } h3 { color: red; } </style> <details> <summary> <div><slot name="flower-name">NAME</slot></div> <div><slot name="flower-image">IMAGE</slot></div> </summary> <div> <slot name="description"></slot> </div> </details> </template> <flower-detail> <h3 slot="flower-name">흰하늘매발톱</h3> <img slot="flower-image" src="http://resrc.devdic.com/img/bykind/flowers/field_flowers_01.jpeg" /> <p slot="description"> 백두산에 자생하는 식물로 알려져 있다. 보라색과 흰색 두 종류가 있으며 하늘처럼 높은 곳에서만 자라고 꽃받침 모양이 매 발톱 같이 생겼다고 해서 붙여진 이름이다. </p> </flower-detail> <flower-detail> <h3 slot="flower-name">노란 제비꽃</h3> <img slot="flower-image" src="http://resrc.devdic.com/img/bykind/flowers/field_flowers_02.jpeg" /> <p slot="description"> 토종 제비꽃 38종과 지구의 모든 제비꽃 중에서 가장 아름다운 제비꽃. 해발 800m 이상의 고산지역에서만 자라지만 최근 서울 관악산 정상 염주대 부근에서도 발견되었다. </p> </flower-detail>
window.addEventListener("DOMContentLoaded", () => { window.customElements.define( "flower-detail", class extends HTMLElement { constructor() { super(); const elTemplate = document.getElementById( "flower-details-template" ).content; const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.append(elTemplate.cloneNode(true)); } } ); });
Console
expand_less
License
License
by DevDic
Close