Mastering Shadow DOM - Martine Dowden
Martine showed us how to create web components using just HTML and vanilla JavaScript - that's right, no framework!
We learned what Web Components and Custom Elements are as well as how the Shadow DOM works to give us the ability for encapsulated reusable components. After reviewing basic DOM manipulation with JavaScript, she showed us how to create a web component using those techniques by bringing back the <blink> tag!
Defining our tag
JavaScript
// blink.js
const Blink = (function() {
"use strict";
class Component extends HTMLElement {
constructor() {
super();
// Create shadow root
const shadow = this.attachShadow({
mode: "open"
});
// Wrap text content with a span tag
const wrapper = document.createElement("span");
// Make a slot for text
const slot = document.createElement("slot");
slot.setAttribute("name", "content");
wrapper.appendChild(slot);
// CSS animation styles
const style = document.createElement("style");
style.textContent = `
@keyframes blink {
0% { visibility: hidden; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
/* :host selects shadow root host */
:host { animation: 1s linear infinite blink; }
`;
// Append
shadow.appendChild(wrapper);
wrapper.appendChild(style);
}
}
customElements.define("wc-blink", Component); // can't use <blink> - it's still reserved
})();
export { Blink };
Putting it to use
HTML
<script>
import { Blink } from "./blink.js";
</script>
<!-- prettier-ignore -->
<wc-blink>
<h1 slot="content">
Look Ma, I'm blinking!
</h1>
</wc-blink>
I learned a bunch in this session on how the Shadow DOM is used to make custom elements and the benefits & limitations of such. I walked away with an understanding that it is possible to create a component-based site/application without a framework if need be. Though certainly the additional features of a framework may outweigh the freedom of independence, it is good to know there are options.
Top comments (0)