Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> ul { margin: 0; list-style: none; padding-left: 20px; } ::slotted([slot="title"]) { font-size: 18px; font-weight: bold; cursor: pointer; } ::slotted([slot="title"])::before { font-size: 14px; } .closed::slotted([slot="title"])::before { content: ; } .closed ul { display: none; } </style> </head> <body> <template id="tmpId"> <div class="menu"> <slot name="title"></slot> <ul> <slot name="item"></slot> </ul> </div> </template> <script> customElements.define('custom-menu', class extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.append(tmpId.content.cloneNode(true)); this.shadowRoot.querySelector('slot[name="title"]') .onclick = () => { this.shadowRoot.querySelector('.menu') .classList.toggle('closed'); }; } }); </script> <custom-menu> <span slot="title">Books</span> <li slot="item">Javascript</li> <li slot="item">Html</li> <li slot="item">Cup Cake</li> </custom-menu> </body> </html>