{"id":480,"date":"2025-02-05T10:26:39","date_gmt":"2025-02-05T10:26:39","guid":{"rendered":"https:\/\/kurtgrung.com\/blog\/?p=480"},"modified":"2025-02-16T12:05:15","modified_gmt":"2025-02-16T12:05:15","slug":"shadowdom","status":"publish","type":"post","link":"https:\/\/kurtgrung.com\/blog\/shadowdom\/","title":{"rendered":"shadowDOM"},"content":{"rendered":"\n<p>What is the <strong>shadowDOM<\/strong> \ud83e\udd77\ud83c\udfff?<br><br>Shadow DOM is a web standard that allows developers to encapsulate HTML, CSS, and JavaScript inside a web component, preventing it from interfering with the rest of the document. It creates a separate, isolated DOM subtree that is not affected by external styles or scripts. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\"><br><code><strong><em>Shadow<\/em>&nbsp;DOM<\/strong> allows hidden DOM trees to be attached to elements in the regular DOM tree \u2014 this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM.<\/code><br><\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/kurtgrung.com\/blog\/wp-content\/uploads\/2025\/02\/shadowdom-1024x469.png\" alt=\"\" class=\"wp-image-481\" style=\"width:711px;height:auto\" srcset=\"https:\/\/kurtgrung.com\/blog\/wp-content\/uploads\/2025\/02\/shadowdom-1024x469.png 1024w, https:\/\/kurtgrung.com\/blog\/wp-content\/uploads\/2025\/02\/shadowdom-300x137.png 300w, https:\/\/kurtgrung.com\/blog\/wp-content\/uploads\/2025\/02\/shadowdom-768x351.png 768w, https:\/\/kurtgrung.com\/blog\/wp-content\/uploads\/2025\/02\/shadowdom-1536x703.png 1536w, https:\/\/kurtgrung.com\/blog\/wp-content\/uploads\/2025\/02\/shadowdom-2048x937.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><br><strong>Features<\/strong>  <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Encapsulation<\/strong><br>Styles and scripts inside a shadow DOM do not leak out, and external styles do not affect the shadowDOM.<br><\/li>\n\n\n\n<li><strong>Scoped Styles<\/strong>&nbsp;<br>CSS inside the shadow DOM applies only to its elements.<br><\/li>\n\n\n\n<li><strong>Custom Elements Support<\/strong>&nbsp; <br>Often used with Web Components to create reusable elements.<br><\/li>\n\n\n\n<li><strong>Shadow Root<\/strong><br>The root of the shadow DOM tree, which is attached to a normal DOM element. <\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Select an element\nconst element = document.getElementById('element');\n\n\/\/ Attach a shadow root\nconst shadowRoot = element.attachShadow({ mode: 'open' });\n\n\/\/ Add content inside shadow DOM\nshadowRoot.innerHTML = `\n&lt;style&gt;\np {\n  color: blue;\n  font-weight: bold;\n}\n&lt;\/style&gt;\n&lt;p&gt;This is inside the shadow DOM!&lt;\/p&gt;\n`;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #616E88\">\/\/ Select an element<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">element<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Attach a shadow root<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">shadowRoot<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">attachShadow<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">mode<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">open<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Add content inside shadow DOM<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">shadowRoot<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A3BE8C\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A3BE8C\">p {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A3BE8C\">  color: blue;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A3BE8C\">  font-weight: bold;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A3BE8C\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A3BE8C\">&lt;\/style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A3BE8C\">&lt;p&gt;This is inside the shadow DOM!&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">`<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>More about Web Components <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_components\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>. <\/p>\n\n\n\n<p>Which essentially form the core fundamentals of most modern Javascript frameworks. <\/p>\n\n\n\n<p><\/p>\n\n\n<p class='codepen'  data-height='300' data-theme-id='0' data-slug-hash='PwoqrWK' data-default-tab='js,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen \n  web-component by Kurt Gr\u00fcng (@kurtgrung)\n  on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>What is the shadowDOM \ud83e\udd77\ud83c\udfff? Shadow DOM is a web standard that allows developers to encapsulate HTML, CSS, and JavaScript inside a web component, preventing it from interfering with the rest of the document. It creates a separate, isolated DOM subtree that is not affected by external styles or scripts. Shadow&nbsp;DOM allows hidden DOM trees [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[151,152,154,147,155],"class_list":["post-480","post","type-post","status-publish","format-standard","hentry","category-code","tag-custom-elements","tag-encapsulation","tag-shadow-root","tag-shadowdom","tag-web-components"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/comments?post=480"}],"version-history":[{"count":12,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/480\/revisions"}],"predecessor-version":[{"id":495,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/480\/revisions\/495"}],"wp:attachment":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/media?parent=480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/categories?post=480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/tags?post=480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}