| // We reuse the "backend" of the imperative Shadow DOM Distribution API for a new custom element, <my-detail>/<my-summary>. |
| //TODO(crbug.com/869308):Emulate other <summary><details> features |
| |
| class MySummaryElement extends HTMLElement { |
| constructor() { |
| super(); |
| } |
| } |
| customElements.define("my-summary", MySummaryElement); |
| |
| customElements.define("my-detail", class extends HTMLElement { |
| constructor() { |
| super(); |
| this.attachShadow({ mode: "open", slotting: "manual" }); |
| } |
| connectedCallback() { |
| const target = this; |
| if (!target.shadowRoot.querySelector(':scope > slot')) { |
| const slot1 = document.createElement("slot"); |
| const slot2 = document.createElement("slot"); |
| const shadowRoot = target.shadowRoot; |
| shadowRoot.appendChild(slot1); |
| shadowRoot.appendChild(slot2); |
| slot1.style.display = "block"; |
| slot1.style.backgroundColor = "red"; |
| const observer = new MutationObserver(function(mutations) { |
| //Get the first <my-summary> element from <my-detail>'s direct children |
| const my_summary = target.querySelector(':scope > my-summary'); |
| if (my_summary) { |
| slot1.assign([my_summary]); |
| } else { |
| slot1.assign([]); |
| } |
| slot2.assign(target.childNodes); |
| }); |
| observer.observe(this, {childList: true}); |
| } |
| } |
| }); |