{"id":4186,"date":"2024-10-15T09:22:01","date_gmt":"2024-10-15T14:22:01","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4186"},"modified":"2024-10-15T09:22:02","modified_gmt":"2024-10-15T14:22:02","slug":"small-example-of-declarative-shadow-dom","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/small-example-of-declarative-shadow-dom\/","title":{"rendered":"Small Example of Declarative Shadow DOM"},"content":{"rendered":"\n<p>I thought the <a href=\"https:\/\/bytes.dev\/archives\/326\">Bytes newsletter #326<\/a> did a good job of showing the different between a &#8220;normal&#8221; web component and a &#8220;declarative shadow DOM&#8221; web component. (Quick ports of the <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/XWvpqaO?editors=1010\">former<\/a> and <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/abepGyr?editors=1010\">latter<\/a>). Declarative shadow DOM is the web components story for &#8220;server-side rendering&#8221; (SSR). All the visual stuff needed to render the component is in the HTML, then JavaScript loads later and wires it all up. Literally the same as <a href=\"https:\/\/frontendmasters.com\/blog\/what-does-hydration-mean\/\">hydration<\/a>. I&#8217;ve heard &#8220;where is the Next.js of web components?&#8221; and I tend to think declarative shadow DOM is one of the major primitives required to get there. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I thought the Bytes newsletter #326 did a good job of showing the different between a &#8220;normal&#8221; web component and a &#8220;declarative shadow DOM&#8221; web component. (Quick ports of the former and latter). Declarative shadow DOM is the web components story for &#8220;server-side rendering&#8221; (SSR). All the visual stuff needed to render the component is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4189,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[249,64,36],"class_list":["post-4186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-declarative-shadow-dom","tag-server-side-rendering","tag-web-components"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/pexels-photo-8438951.jpeg?fit=1880%2C1255&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=4186"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4186\/revisions"}],"predecessor-version":[{"id":4205,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4186\/revisions\/4205"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/4189"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=4186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=4186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=4186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}