New in Chrome 90

Get your 90s vibe on, as Pete LePage has took the version number 90 to the next level there … BRILLIANT! 🤩

Chrome 90 is rolling out now! There’s a new value for the CSS overflow property. The Feature Policy API has been renamed to Permission Policy. And there’s a new way to implement and use Shadow DOM directly in HTML. Plus there’s plenty more.

~

The Declarative Shadow DOM seems like a very nice addition, but will to have to wrap my head around not using <shadow-root /> for it though — it’s <template shadowroot="open" /> we need to use. You can read the reasoning behind this decision in the explainer.

~

I’ve tweeted about overflow: clip; before. It can be compared to overflow: hidden;, except for the fact that it will never ever create a scrollcontainer (not even one that can be moved programmatically, through JavaScript).

~

New in Chrome 90 →

React + The Shadow DOM = ReactShadow

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 →

Using Encapsulation for Semantic Markup

As designers, we may want to style something in a certain way, but sometimes end up having to go to war with HTML, CSS, and JS to get it done. And even then, the results can be weighty, hacky, and unsemantic. Shadow DOM might be able to save us from that, giving us a fresh place to use whatever HTML we need without exposing that mess to the actual DOM

Yes, that’s just a default <input type="file" />, pimped using the Shadow DOM and the template element.

Related: All posts tagged shadow dom here on bram.us, contains some good introductory videos.

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 elements. The spec is one of several new API primitives landing under the Web Components umbrella, but it’s quite possibly the most important. Web Components don’t exist without the features unlocked by custom elements

Custom Elements: defining new elements in HTML →

Shadow DOM introduction

shadowdom

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 DOM at Fronteers ’11 (and blogged about it). Glad to see things are going somewhere (in Chrome at least)

Shadow DOM 101 →
Shadow DOM 201 →
Shadow DOM 301 →

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 Chrome. As you can see it has buttons with behaviours & a slider control. These are implemented as DOM elements in Chrome (and other browsers), but they have a magic invisibility cloak.

We can’t access the buttons or slider control using document.querySelector or similar, they’re not visible in Web Inspector / Firebug. Also, they have a magic style forcefield:
[css]audio * {
border: 3px solid red;
}[/css]

The above has no effect on the controls of the audio element. Magic!

Soon it won’t be magic, it’ll be toys.

HTML Component Model & the Shadow DOM →