:root{--wcbp-padding:1rem;--wcbp-display:block;--wcbp-border-width:2px;--wcbp-border-style:dashed;--wcbp-font-family:system-ui, sans-serif}html{block-size:100%}body{font-family:var(--wcbp-font-family);min-block-size:100dvh;margin:0;padding:1.5rem}h1{margin:0 0 1rem}div{gap:1rem;display:grid}code{background:#f0f0f0;border-radius:4px;padding:.2rem .4rem}dynamic-name,cdn-dynamic-name,no-side-effects,web-component-best-practices{display:var(--wcbp-display);padding:var(--wcbp-padding);border-width:var(--wcbp-border-width);border-style:var(--wcbp-border-style)}dynamic-name{border:var(--wcbp-border-width) var(--wcbp-border-style) blue}cdn-dynamic-name{border:var(--wcbp-border-width) var(--wcbp-border-style) purple}no-side-effects{border:var(--wcbp-border-width) var(--wcbp-border-style) green}.demo-components{opacity:0;visibility:hidden;transition:opacity .25s ease-in-out}.wcbp-ready .demo-components{opacity:1;visibility:visible}