{"type":"rich","version":"1.0","provider_name":"Transistor","provider_url":"https://transistor.fm","author_name":"Programming Tech Brief By HackerNoon","title":"Declarative Shadow DOM: The Magic Pill for Server-Side Rendering and Web Components","html":"<iframe width=\"100%\" height=\"180\" frameborder=\"no\" scrolling=\"no\" seamless src=\"https://share.transistor.fm/e/d37409d2\"></iframe>","width":"100%","height":180,"duration":188,"description":"\n        This story was originally published on HackerNoon at: https://hackernoon.com/declarative-shadow-dom-the-magic-pill-for-server-side-rendering-and-web-components.\nDiscover how to use Shadow DOM for server-side rendering to improve web performance and SEO.\nCheck more stories related to programming at: https://hackernoon.com/c/programming.\n            You can also check exclusive content about #server-side-rendering, #shadow-dom, #web-components, #declarative-shadow-dom, #static-html, #web-component-styling, #web-performance-optimization, #imperative-api-shadow-dom,  and more.\nThis story was written by: @pradeepin2. Learn more about this writer by checking @pradeepin2's about page,\n            and for more stories, please visit hackernoon.com.\nShadow DOM is a web standard enabling encapsulation of DOM subtrees in web components. It allows developers to create isolated scopes for CSS and JavaScript within a document, preventing conflicts with other parts of the page. Shadow DOM's key feature is its \"shadow root,\" serving as a boundary between the component's internal structure and the rest of the document.","thumbnail_url":"https://img.transistorcdn.com/KhCapPSRkLGL2Xw8888yuChkNRWthaKapLYTvNdu4W4/rs:fill:0:0:1/w:400/h:400/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzQxMTY2LzE2ODM1/ODIzMzAtYXJ0d29y/ay5qcGc.webp","thumbnail_width":300,"thumbnail_height":300}