A rather geeky/technical weblog, est. 2001, by Bramus
The Lit team is pleased to announce an experimental preview release of @lit-labs/eleventy-plugin-lit, a new plugin for Eleventy that renders your Lit components as static HTML during your Eleventy build, and lets you hydrate them after your JavaScript loads. This is pretty nice, as out comes Declarative Shadow DOM-compatible which Chromium-based browsers can render, while …
Continue reading “Eleventy plugin for static rendering of Lit components”
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 →
UPDATE: This demo no longer works as createShadowRoot got replaced with attachShadow + shadow roots can only be created on a limited set of elements nowadays. See the Pen A Pen by chrismichaelscott on CodePen. As designers, we may want to style something in a certain way, but sometimes end up having to go to …
<template id=”sdtemplate”> <style> p { color: orange; } </style> <p>I’m in Shadow DOM. My markup was stamped from a <template>.</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 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 …
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 …