feat: support for custom and slot elements (#2581)

tests/reftests/webcomponents/slot-element.js

@@ -0,0 +1,51 @@
+customElements.define('summary-display',
+    class extends HTMLElement {
+        constructor() {
+            super();
+
+            const template = document.getElementById('summary-display-template');
+            const templateContent = template.content;
+
+            const shadowRoot = this.attachShadow({mode: 'open'});
+            shadowRoot.appendChild(templateContent.cloneNode(true));
+
+            const items = Array.from(this.querySelectorAll('li'));
+            const descriptions = Array.from(this.querySelectorAll('p'));
+
+            items.forEach(item => {
+                handleClick(item);
+            });
+
+            descriptions.forEach(description => {
+                updateDisplay(description, items[1]);
+            });
+
+            function handleClick(item) {
+                item.addEventListener('click', function() {
+                    items.forEach(item => {
+                        item.style.backgroundColor = 'white';
+                    });
+
+                    descriptions.forEach(description => {
+                        updateDisplay(description, item);
+                    });
+                });
+            }
+
+            function updateDisplay(description, item) {
+                description.removeAttribute('slot');
+
+                if(description.getAttribute('data-name') === item.textContent) {
+                    description.setAttribute('slot', 'choice');
+                    item.style.backgroundColor = '#bad0e4';
+                }
+            }
+
+            const slots = this.shadowRoot.querySelectorAll('slot');
+            slots[1].addEventListener('slotchange', function(e) {
+                const nodes = slots[1].assignedNodes();
+                console.log(`Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`);
+            });
+        }
+    }
+);