Unleashing the Power of Web Components for Editors
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. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
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
