Skip to main content
","learningResourceType":"Practice problem","educationalLevel":"hard","about":"HTML","teaches":"declarative shadow DOM","url":"https://journeyuncommon.com/quiz/question/33d63925-6826-420d-8ac0-1fb10adfe1b5","inLanguage":"en","isAccessibleForFree":true,"provider":{"@id":"https://journeyuncommon.com/#organization"},"isPartOf":{"@type":"WebSite","@id":"https://journeyuncommon.com/#website","name":"Journey Uncommon","url":"https://journeyuncommon.com"}}
Journey Uncommon Logo
JourneyUncommon
hardHTMLdeclarative shadow DOMSingle-choice MCQ

A custom element is defined AFTER its declarative shadow root was already parsed into the DOM. During the upgrade, what happens with the existing shadow root and `attachShadow`?

<my-el> <template shadowrootmode="open">...</template> </my-el> <script> class MyEl extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); // what happens? } } customElements.define('my-el', MyEl); </script>