Unleashing the Power of Web Components for Editors
Make Your Own Legos™️
How Web Components Can Empower Your Editors
Stephen Fornal, Tarrant County College District, Fort Worth, TX
stephen.fornal@tccd.edu
What is a Web Component?
Encapsulated, reusable code
Built using a suite of web technologies
Supported in all ever-green browsers (Chrome, Firefox,
Safari, Edge, Opera)
Complimentary to tools you already use
Why Bother?
Which Web Technologies, Exactly?
Custom Elements
Shadow DOM
HTML Templates
Let’s dive in for a brief intro and how-to
Custom Elements — HTML
<!-- HTML on your page
-->
<p>
Here’s some normal paragraphs
</p>
<my-custom-element></my-custom-element>
Can be anything, but does require a hyphen
Custom Elements — JavaScript
class MyCustomElement extends HTMLElement {constructor(){super();
}
}
window.customElements.define(‘my-custom-element’, MyCustomElement);
Extending Existing Elements
// In your JavaScript
class WordCount extends HTMLParagraphElement { /* etc. */ }window.customElements.define(‘word-count’, WordCount,
{ extends: ‘p’});
<!-- In your HTML
-->
<p is=“word-count”>
It’s a special paragraph
!</p>
Lifecycle Functions for Custom Elements
There are 4 callback functions that activate during the life cycle of a custom element
In your
class
, you define the behaviors for these life cycle events
connectedCallback
disconnectedCallback
adoptedCallback
attributeChangedCallback
Shadow DOM
A separate,
encapsulated
DOM tree
Attaches to your custom element
Manipulated just like the normal DOM
This is where you build out the complicated “guts” of your custom component
Attaching a Shadow DOM
class MyCustomElement
extends
HTMLElement {constructor() {super();
const shadow = this.appendShadow({ mode: “open” });shadow.appendChild( /* etc. */ );
/* etc. */
}
}
HTML Templates
Templates are mark-up structure than can be reused to make instances of elements
Templates can have one or more “slots” for content
Templates aren’t rendered in your document
Use JavaScript to copy a template and attach it to the DOM “for real”
Creating a Template
<template id=“custom-card”>
<div class=“card”>
<div class=“icon”><img src=“” alt =“” /></div>
<div class=“card-content”>
<slot />
</div>
</div>
</template>
/* In your JS */
class MyCard extends HTMLElement {constructor() {super();
const shadow = this.appendShadow({ mode: “open” });const template = document.getElementById(‘my-card-template’).content;
shadow.appendChild(template.cloneNode(true));
let icon = shadow.querySelector(‘.icon img’);
icon.src = this.getAttribute(‘icon’);
}
}
window.customElements.define(‘my-card’, MyCard);
<!-- In your HTML -->
<my-card icon=“checkmark.svg”>
<p>
Details for on this card
</p>
<p>Really, any mark-up at all!</p>
<a class=“btn” href=“#”>
Read more
</a>
</my-card>
A Story About Our Legos
Our first foray into the world of Web Components, all the why’s and how’s
With a trip into the code editor along the way :)
Resources
Mozilla Developer Network
has a great section on Web Components with tutorials and
reference documents
Heydon Pickering’s
excellent book and website
Inclusive Components
is a great starting
point! The accessibility of our toggle section owes a lot to this book.
https://inclusive-components.design/
webcomponents.org
has a huge library of components that you can download and build
off
Introduce yourself
Brief background
Move it along
Explore the world of web components and how they can enable editors to create reusable, customizable content easily. Learn about custom elements, Shadow DOM, and lifecycle functions that enhance the capabilities of web development without relying on frameworks.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Make Your Own Legos How Web Components Can Empower Your Editors Stephen Fornal, Tarrant County College District, Fort Worth, TX stephen.fornal@tccd.edu
What is a Web Component? Encapsulated, reusable code Built using a suite of web technologies Supported in all ever-green browsers (Chrome, Firefox, Safari, Edge, Opera) Complimentary to tools you already use
Why Bother? Doesn t rely on Frameworks Easy for your editors You re in charge of accessibility
Which Web Technologies, Exactly? Custom Elements Shadow DOM HTML Templates Let s dive in for a brief intro and how-to
Custom Elements HTML <!-- HTML on your page --> <p>Here s some normal paragraphs</p> <my-custom-element></my-custom-element> Can be anything, but does require a hyphen
Custom Elements JavaScript class MyCustomElement extends HTMLElement { constructor(){ super(); } } window.customElements.define( my-custom-element , MyCustomElement);
Extending Existing Elements // In your JavaScript class WordCount extends HTMLParagraphElement { /* etc. */ } window.customElements.define( word-count , WordCount, { extends: p }); <!-- In your HTML --> <p is= word-count >It s a special paragraph!</p>
Lifecycle Functions for Custom Elements There are 4 callback functions that activate during the life cycle of a custom element In your class, you define the behaviors for these life cycle events connectedCallback disconnectedCallback adoptedCallback attributeChangedCallback
Shadow DOM A separate, encapsulated DOM tree Attaches to your custom element Manipulated just like the normal DOM This is where you build out the complicated guts of your custom component
Attaching a Shadow DOM class MyCustomElement extends HTMLElement { constructor() { super(); const shadow = this.appendShadow({ mode: open }); shadow.appendChild( /* etc. */ ); /* etc. */ } }
HTML Templates Templates are mark-up structure than can be reused to make instances of elements Templates can have one or more slots for content Templates aren t rendered in your document Use JavaScript to copy a template and attach it to the DOM for real
Creating a Template <template id= custom-card > <div class= card > <div class= icon ><img src= alt = /></div> <div class= card-content > <slot /> </div> </div> </template>
/* In your JS */ class MyCard extends HTMLElement { constructor() { super(); const shadow = this.appendShadow({ mode: open }); const template = document.getElementById( my-card-template ).content; shadow.appendChild(template.cloneNode(true)); } window.customElements.define( my-card , MyCard); } let icon = shadow.querySelector( .icon img ); icon.src = this.getAttribute( icon ); <!-- In your HTML --> <my-card icon= checkmark.svg > <p>Details for on this card</p> <p>Really, any mark-up at all!</p> <a class= btn href= # >Read more</a> </my-card>
A Story About Our Legos Our first foray into the world of Web Components, all the why s and how s With a trip into the code editor along the way :)
Resources Mozilla Developer Network has a great section on Web Components with tutorials and reference documents Heydon Pickering s excellent book and website Inclusive Components is a great starting point! The accessibility of our toggle section owes a lot to this book. https://inclusive-components.design/ webcomponents.org has a huge library of components that you can download and build off
