React + The Shadow DOM = ReactShadow

By using ReactShadow you have all the benefits of Shadow DOM in React. import ShadowDOM from 'react-shadow'; export default props => { return ( <ShadowDOM include={['css/core/calendar.css', props.theme]}> <h1>Calendar for {props.date}</h1> </ShadowDOM> ); } Installation per npm, of course: npm i react-shadow –save ReactShadow (GitHub) →ReactShadow Demo →

Custom HTML Elements

<template id=”sdtemplate”> <style> p { color: orange; } </style> <p>I’m in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p> </template> <script> var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = document.querySelector(‘#sdtemplate’); this.createShadowRoot().appendChild(t.content.cloneNode(true)); } } }); document.register(‘x-foo-from-template’, {prototype: proto}); </script> Custom Elements allow web developers to define new types of HTML […]

Shadow DOM introduction

Shadow DOM is incredibly powerful. For the first time ever, we have proper encapsulation without the extra baggage of <iframe>s or other older techniques. Shadow DOM is certainly complex beast, but it’s a beast worth adding to the web platform. Spend some time with it. Learn it. Ask questions. I first got introduced to Shadow […]

HTML Component Model & the Shadow DOM

At Fronteers ’11, Alex Russel gave a great talk about the Shadow DOM (relevant slides starting from slide 32). Jake Archibald, who also gave an awesome presentation at Fronteers, provides us a nice writeup on the subject, along with a very practical example: This is an <audio> element, or at least its implementation in Google […]