PageSourceSearch

https://htmlwithsuperpowers.netlify.app/using/

html htmlwithsuperpowers.netlify.app collected 2026-10-03 10:53:05 UTC 36,463 bytes, 48 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-US" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>Using Web Components with HTML | HTML with Superpowers</title>
7    <meta name="description" content="Introduction to Web Components">
8    <link rel="preload stylesheet" href="/assets/style.f495f320.css" as="style">
9    
10    
10<script type="module" src="/assets/app.238edb13.js"></script>
10
11    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
12    <link rel="modulepreload" href="/assets/chunks/framework.adbdbaa5.js">
13    <link rel="modulepreload" href="/assets/chunks/theme.8d179073.js">
14    <link rel="modulepreload" href="/assets/using_index.md.6afa1ee7.lean.js">
15    
15<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
15
16  </head>
17  <body>
18    <div id="app"><div class="Layout" data-v-6be51355><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ae3e3f51></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ae3e3f51> Skip to content </a><!--]--><!----><header class="VPNav" data-v-6be51355 data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-faa4ef78><div class="container" data-v-faa4ef78><div class="title" data-v-faa4ef78><div class="VPNavBarTitle has-sidebar" data-v-faa4ef78 data-v-8bbac535><a class="title" href="/" data-v-8bbac535><!--[--><!--]--><!----><!--[-->HTML with Superpowers<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-faa4ef78><div class="curtain" data-v-faa4ef78></div><div class="content-body" data-v-faa4ef78><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-faa4ef78><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-faa4ef78 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/get-started/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Getting Started<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/using/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Using<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/styling/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Styling<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/writing/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Writing<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/examples/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Examples<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/faq/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->FAQ<!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-faa4ef78 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-faa4ef78 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/davatron5000/htmlwithsuperpowers" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
18<!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-faa4ef78 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/davatron5000/htmlwithsuperpowers" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-faa4ef78 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-6be51355 data-v-5cfd5582><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-5cfd5582><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-5cfd5582>
18<path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-5cfd5582>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-5cfd5582 data-v-d5bb9d56><button data-v-d5bb9d56>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-6be51355 data-v-845b8fc6><div class="curtain" data-v-845b8fc6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-845b8fc6><span class="visually-hidden" id="sidebar-aria-label" data-v-845b8fc6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 has-active" data-v-845b8fc6 data-v-4fbabd82><div class="item" role="button" tabindex="0" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><h2 class="text" data-v-4fbabd82>How to use with HTML</h2><!----></div><div class="items" data-v-4fbabd82><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class="VPLink link link" href="/using/" data-v-4fbabd82><!--[--><p class="text" data-v-4fbabd82>Overview</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0" data-v-845b8fc6 data-v-4fbabd82><div class="item" role="button" tabindex="0" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><h2 class="text" data-v-4fbabd82>Examples</h2><!----></div><div class="items" data-v-4fbabd82><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/examples/two-up'><!--[--><p class="text" data-v-4fbabd82>&lt;two-up></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/examples/copy-table'><!--[--><p class="text" data-v-4fbabd82>&lt;copy-table></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/examples/podcast-player'><!--[--><p class="text" data-v-4fbabd82>&lt;podcast-player></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/examples/details-utils'><!--[--><p class="text" data-v-4fbabd82>&lt;details-utils></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/examples/spicy-sections'><!--[--><p class="text" data-v-4fbabd82>&lt;spicy-sections></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/examples/a-frame'><!--[--><p class="text" data-v-4fbabd82>&lt;a-frame></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0" data-v-845b8fc6 data-v-4fbabd82><div class="item" role="button" tabindex="0" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><h2 class="text" data-v-4fbabd82>Component systems</h2><!----></div><div class="items" data-v-4fbabd82><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/examples/generic-components'><!--[--><p class="text" data-v-4fbabd82>&lt;generic-components></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/examples/geo-elements'><!--[--><p class="text" data-v-4fbabd82>&lt;geo-elements></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0" data-v-845b8fc6 data-v-4fbabd82><div class="item" role="button" tabindex="0" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><h2 class="text" data-v-4fbabd82>Finding components</h2><!----></div><div class="items" data-v-4fbabd82><!--[--><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/standalones'><!--[--><p class="text" data-v-4fbabd82>Standalone Components</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-4fbabd82 data-v-4fbabd82><div class="item" data-v-4fbabd82><div class="indicator" data-v-4fbabd82></div><a class='VPLink link link' data-v-4fbabd82 href='/using/systems'><!--[--><p class="text" data-v-4fbabd82>Web Component Design Systems</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-6be51355 data-v-3107c4ee><div class="VPDoc has-sidebar has-aside" data-v-3107c4ee data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-b0ff2abe><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _using_index" data-v-6b87e69f><div>
18<h1 id="using-web-components-with-html" tabindex="-1">Using Web Components with HTML <a class="header-anchor" href="#using-web-components-with-html" aria-label="Permalink to &quot;Using Web Components with HTML&quot;">​</a></h1><p>One important aspect of Web Components is that they don&#39;t require advanced JavaScript knowledge or build tooling to use, it&#39;s plain old HTML.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><p>In practice, using web components looks something like this:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">simple-greeting</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">name</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;World!&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">simple-greeting</span><span style="color:#E1E4E8;">&gt;</span></span>
19<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/path/to/simple-greeting.js&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;module&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">simple-greeting</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">name</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;World!&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">simple-greeting</span><span style="color:#24292E;">&gt;</span></span>
20<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/path/to/simple-greeting.js&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;module&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><p>A script tag and a custom element is all you need to get started using Web Components. Some Web Components act as wrapper around your content and allow you to upgrade your content into an interactive control.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">generic-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
21<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;Home&lt;/</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;</span></span>
22<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
23<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;Home tab contnet&lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
24<span class="line"><span style="color:#E1E4E8;">  &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
25<span class="line"></span>
26<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;About&lt;/</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;</span></span>
27<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;About tab content&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
28<span class="line"></span>
29<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;
29Contact&lt;/</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;</span></span>
30<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;Contact tab content&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
31<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">generic-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
32<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/path/to/generic-accordion.js&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;module&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">generic-accordion</span><span style="color:#24292E;">&gt;</span></span>
33<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;Home&lt;/</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;</span></span>
34<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
35<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;Home tab contnet&lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
36<span class="line"><span style="color:#24292E;">  &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
37<span class="line"></span>
38<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;About&lt;/</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;</span></span>
39<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;About tab content&lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
40<span class="line"></span>
41<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;Contact&lt;/</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;</span></span>
42<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;Contact tab content&lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
43<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">generic-accordion</span><span style="color:#24292E;">&gt;</span></span>
44<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/path/to/generic-accordion.js&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;module&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><p>This should look somewhat familiar. It&#39;
44s not too different from any React/Vue/Svelte/<code>&lt;Insert JS Framework Here&gt;</code> component.</p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-37656e44><!--[--><!--]--><!----><nav class="prev-next" data-v-37656e44><div class="pager" data-v-37656e44><!----></div><div class="pager" data-v-37656e44><a class='pager-link next' data-v-37656e44 href='/using/examples/two-up'><span class="desc" data-v-37656e44>Next page</span><span class="title" data-v-37656e44>&lt;two-up></span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6be51355 data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Licenced MIT</p><p class="copyright" data-v-e03eb2e1>Copyright © 2021-present Dave Rupert</p></div></footer><!--[--><!--]--></div></div>
45    
45<script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_index.md\":\"1e79ea83\",\"examples_counter_review.md\":\"26d22d6e\",\"styling_named-parts.md\":\"d29daa76\",\"styling_slotted.md\":\"c9028607\",\"faq_accessibility.md\":\"f6463149\",\"writing_css-module-scripts.md\":\"0ad38f48\",\"examples_example-app_step1.md\":\"322b3abe\",\"styling_light-dom.md\":\"1f9312be\",\"get-started_shadow-dom.md\":\"91a7382f\",\"writing_element-internals.md\":\"274b2e0f\",\"examples_example-app_step2.md\":\"37a3deee\",\"using_examples_generic-components.md\":\"f2306843\",\"using_standalones.md\":\"2e6b6b24\",\"using_examples_copy-table.md\":\"f8089c48\",\"examples_counter_step3.md\":\"4109d336\",\"styling_defined.md\":\"4a53f665\",\"using_examples_podcast-player.md\":\"d4927030\",\"styling_css-variables.md\":\"75a79a3a\",\"get-started_index.md\":\"029b0d6d\",\"get-started_es-modules.md\":\"994ebe58\",\"faq_ie11.md\":\"f874b3e3\",\"styling_classes.md\":\"292d241d\",\"styling_deep.md\":\"d736c672\",\"styling_host-context.md\":\"1648fe9a\",\"index.md\":\"18c3feae\",\"examples_custom-alert_step3.md\":\"edad7400\",\"using_examples_two-up.md\":\"917ea46e\",\"faq_routing.md\":\"3623cdce\",\"using_examples_geo-elements.md\":\"31cac404\",\"faq_index.md\":\"257a6d10\",\"using_examples_details-utils.md\":\"27f20d2c\",\"styling_host.md\":\"c63583bc\",\"examples_custom-alert_step2.md\":\"1cb39bc9\",\"get-started_elements.md\":\"65bf69a4\",\"writing_declarative-shadow-dom.md\":\"c1e873ac\",\"styling_themes.md\":\"e28c2e06\",\"using_index.md\":\"6afa1ee7\",\"writing_index.md\":\"88aad751\",\"writing_is.md\":\"351decf3\",\"faq_context-api.md\":\"feaabbeb\",\"faq_react.md\":\"b2eb5dac\",\"using_examples_spicy-sections.md\":\"10d5e3f1\",\"examples_counter_step2.md\":\"fc4b54d0\",\"examples_example-app_review.md\":\"507fd534\",\"using_examples_a-frame.md\":\"3e243f51\",\"writing_libraries.md\":\"559748f5\",\"examples_example-app_step7.md\":\"8a246479\",\"styling_index.md\":\"7d2c92fe\",\"styling_inheritable.md\":\"4cef1e68\",\"using_systems.md\":\"c6698438\",\"faq_ssr.md\":\"1cc5fa36\",\"faq_seo.md\":\"fd689702\",\"examples_example-app_step4.md\":\"6bc2d6ad\",\"examples_example-app_step3.md\":\"d389694b\",\"writing_js-frameworks.md\":\"8f1ea06d\",\"examples_counter_step1.md\":\"da3586da\",\"examples_custom-alert_step1.md\":\"64c02734\",\"examples_example-app_step6.md\":\"60faa510\",\"get-started_custom-elements.md\":\"65d7232a\",\"examples_example-app_step5.md\":\"dace1557\",\"examples_custom-alert_review.md\":\"fde5e406\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"HTML with Superpowers\",\"description\":\"Introduction to Web Components\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"footer\":{\"message\":\"Licenced MIT\",\"copyright\":\"Copyright © 2021-present Dave Rupert\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/davatron5000/htmlwithsuperpowers\"}],\"nav\":[{\"text\":\"Getting Started\",\"link\":\"/get-started/\",\"activeMatch\":\"^/get-started/\"},{\"text\":\"Using\",\"link\":\"/using/\",\"activeMatch\":\"^/using/\"},{\"text\":\"Styling\",\"link\":\"/styling/\",\"activeMatch\":\"^/styling/\"},{\"text\":\"Writing\",\"link\":\"/writing/\",\"activeMatch\":\"^/writing/\"},{\"text\":\"Examples\",\"link\":\"/examples/\",\"activeMatch\":\"^/examples/\"},{\"text\":\"FAQ\",\"link\":\"/faq/\",\"activeMatch\":\"^/faq/\"}],\"sidebar\":{\"/get-started/\":[{\"text\":\"What are Web Components?\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/get-started/\"}]},{\"text\":\"Web Standards\",\"items\":[{\"text\":\"&lt;template> Elements\",\"link\":\"/get-started/elements\"},{\"text\":\"Custom Elements\",\"link\":\"/get-started/custom-elements\"},{\"text\":\"Shadow DOM\",\"link\":\"/get-started/shadow-dom\"},{\"text\":\"ES Modules\",\"link\":\"/get-started/es-modules\"}]}],\"/using/\":[{\"text\":\"How to use with HTML\",\"items\":[{\"text\":\"Overview\",\"link\":\"/using/\"}]},{\"text\":\"Examples\",\"items\":[{\"text\":\"&lt;two-up>\",\"link\":\"/using/examples/two-up\"},{\"text\":\"&lt;copy-table>\",\"link\":\"/using/examples/copy-table\"},{\"text\":\"&lt;podcast-player>\",\"link\":\"/using/examples/podcast-player\"},{\"text\":\"&lt;details-utils>\",\"link\":\"/using/examples/details-utils\"},{\"text\":\"&lt;spicy-sections>\",\"link\":\"/using/examples/spicy-sections\"},{\"text\":\"&lt;a-frame>\",\"link\":\"/using/examples/a-frame\"}]},{\"text\":\"Component systems\",\"items\":[{\"text\":\"&lt;generic-components>\",\"link\":\"/using/examples/generic-components\"},{\"text\":\"&lt;geo-elements>\",\"link\":\"/using/examples/geo-elements\"}]},{\"text\":\"Finding components\",\"items\":[{\"text\":\"Standalone Components\",\"link\":\"/using/standalones\"},{\"text\":\"Web Component Design Systems\",\"link\":\"/using/systems\"}]}],\"/styling/\":[{\"text\":\"How to style with CSS\",\"items\":[{\"text\":\"Overview\",\"link\":\"/styling/\"}]},{\"text\":\"Piercing the Shadow DOM\",\"items\":[{\"text\":\"✅ Styling Light DOM\",\"link\":\"/styling/light-dom\"},{\"text\":\"❌ Styling Shadow DOM\",\"link\":\"/styling/deep\"}
45,{\"text\":\"❌ Global Classes\",\"link\":\"/styling/classes\"},{\"text\":\"✅ Inheritable Styles\",\"link\":\"/styling/inheritable\"}]},{\"text\":\"Internal styling APIs\",\"items\":[{\"text\":\"CSS Variables\",\"link\":\"/styling/css-variables\"},{\"text\":\"Predefined Themes\",\"link\":\"/styling/themes\"},{\"text\":\"Named Parts\",\"link\":\"/styling/named-parts\"}]},{\"text\":\"Internal CSS features\",\"items\":[{\"text\":\":host\",\"link\":\"/styling/host\"},{\"text\":\":host-context()\",\"link\":\"/styling/host-context\"},{\"text\":\"::slotted()\",\"link\":\"/styling/slotted\"},{\"text\":\":defined\",\"link\":\"/styling/defined\"}]}],\"/writing/\":[{\"text\":\"How to write with JS\",\"items\":[{\"text\":\"Overview\",\"link\":\"/writing/\"},{\"text\":\"Comparing Web Component Libraries\",\"link\":\"/writing/libraries\"},{\"text\":\"JS Frameworks\",\"link\":\"/writing/js-frameworks\"}]},{\"text\":\"Advanced Concepts\",\"items\":[{\"text\":\"Declarative Shadow DOM\",\"link\":\"/writing/declarative-shadow-dom\"},{\"text\":\"ElementInternals\",\"link\":\"/writing/element-internals\"},{\"text\":\"CSS Module Scripts\",\"link\":\"/writing/css-module-scripts\"},{\"text\":\"The is=\\\"\\\" attribute\",\"link\":\"/writing/is\"}]}],\"/examples/\":[{\"text\":\"Example: Counter\",\"items\":[{\"text\":\"Step 1: Basic Setup\",\"link\":\"/examples/counter/step1\"},{\"text\":\"Step 2: Add Local State\",\"link\":\"/examples/counter/step2\"},{\"text\":\"Step 3: Add External API\",\"link\":\"/examples/counter/step3\"},{\"text\":\"Review\",\"link\":\"/examples/counter/review\"}]},{\"text\":\"Example: Custom Alert\",\"items\":[{\"text\":\"Step 1: Basic Setup\",\"link\":\"/examples/custom-alert/step1\"},{\"text\":\"Step 2: Add Event Handling\",\"link\":\"/examples/custom-alert/step2\"},{\"text\":\"Step 3: Add Styling\",\"link\":\"/examples/custom-alert/step3\"},{\"text\":\"Review\",\"link\":\"/examples/custom-alert/review\"}]},{\"text\":\"Example: Brewery App\",\"items\":[{\"text\":\"Step 1: Project Setup\",\"link\":\"/examples/example-app/step1\"},{\"text\":\"Step 2: Setup App Wrapper\",\"link\":\"/examples/example-app/step2\"},{\"text\":\"Step 3: Fetch Breweries\",\"link\":\"/examples/example-app/step3\"},{\"text\":\"Step 4: Add Visited State\",\"link\":\"/examples/example-app/step4\"},{\"text\":\"Step 5: Add Filtering\",\"link\":\"/examples/example-app/step5\"},{\"text\":\"Step 6: Child components\",\"link\":\"/examples/example-app/step6\"},{\"text\":\"Step 7: Third-party components\",\"link\":\"/examples/example-app/step7\"},{\"text\":\"Review\",\"link\":\"/examples/example-app/review\"}]}],\"/faq/\":[{\"text\":\"Frequently Asked Questions\",\"items\":[{\"text\":\"Accessibility\",\"link\":\"/faq/accessibility\"},{\"text\":\"Context API\",\"link\":\"/faq/context-api\"},{\"text\":\"IE11\",\"link\":\"/faq/ie11\"},{\"text\":\"React\",\"link\":\"/faq/react\"},{\"text\":\"Routing\",\"link\":\"/faq/routing\"},{\"text\":\"Search Engine Optimization (SEO)\",\"link\":\"/faq/seo\"},{\"text\":\"Server-side Rendering (SSR)\",\"link\":\"/faq/ssr\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
45
46    
47  </body>
48</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.