class MyElement extends HTMLElement {
    constructor() {
        super();
        // more code for initialization etc
    }

    // Example lifecycle method
    // This method that is called the custom element is added to the main DOM
    connectedCallback() {
        // this is where you add event listeners to elements in the shadow DOM
    }

    // rest of class code goes here, i.e. various method definitions
}

// REQUIRED: use kebab-case for the name of the custom element
customElements.define("my-element", MyElement);

// We can now use the custom element by writing <my-element></my-element> in our
// HTML code.

this.attachShadow({mode: 'open'})

class MyElement extends HTMLElement {
    constructor() {
        super();

        // create a shadow DOM for the custom element
        // {mode: 'open'} allows it to be inspected in the browser
        this.attachShadow({ mode: "open" });
    }

    // rest of class code goes here, i.e. various method definitions
}

// REQUIRED: use kebab-case for the name of the custom element
customElements.define("my-element", MyElement);

// We can now use the custom element by writing <my-element></my-element> in our
// HTML code.

this.attachShadow({mode: 'open'});

const template = document.createElement("template");
template.innerHTML = `
  <style>
  </style>

  <div>
    <p>This is a template</p>
  </div>
`;

class MyElement extends HTMLElement {
    constructor() {
        super();

        // create a shadow DOM for the custom element.
        // {mode: 'open'} allows it to be inspected
        this.attachShadow({ mode: "open" });
        // put a clone (true == deep copy) of our template into the shadow DOM
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

    // rest of class code goes here, i.e. various method definitions
}

// define custom component (requires use of kebab-case)
window.customElements.define("my-element", MyElement);

.card ::slotted(p) {...}

<p><slot name="name-of-slot">TEXT MISSING</slot></p>

this.shadowRoot.appendChild(<custom-element-child>)

const template = document.createElement("template");

// note the use of backticks (string template)
template.innerHTML = `
 <!-- component template style & html goes here -->
 <style>
 </style>
 <div></div>
`;

class NameOfCustomClass extends HTMLElement {
    constructor() {
        super();
        // create a shadow DOM for the custom element. {mode: 'open'} allows it to be inspected
        this.attachShadow({ mode: "open" });
        // put a clone (true == deep copy) of our template into the shadow DOM
        this.shadowRoot.appendChild(template.content.cloneNode(true));

        // initialization code here
    }

    // this method is run when our custom element is inserted into the document DOM
    connectedCallback() {
        // add event listeners here
    }

    disconnectedCallback() {
        // remove event listeners here
        // all event listeners can be removed from an element using element.removeEventListener()
    }
}

// define custom component (requires use of kebab-case)
window.customElements.define("html-element-name", NameOfCustomClass);

class MyWidget extends HTMLElement {
    constructor() {
        // constructor code here
    }

    // This is a event handler method you want to use
    eventHandler(event) {
        // event handler code needs to refer to the MyWidget object using `this`
        this.shadowRoot.querySelector(...);
    }

    connectedCallback() {
        // Add event listeners like this
        this.shadowRoot
            .querySelector(...)
            .addEventListener("click", (event) => {
                this.eventHandler(event);
            });

        // DO NOT do it like this; will result in `this` being bound to event.target
        // in the handler
        this.shadowRoot
            .querySelector(...)
            .addEventListener("click", this.eventHandler);
    }
}

// Create a new element:
let newElement = document.createElement(tagName);
// Add `newElement` as the last child of `element`:
element.appendChild(newElement);
// Add `newElement` after `element` as a new sibling:
element.after(newElement);
// Add `newElement` before `element` as a new sibling:
element.before(newElement);

<!-- main html -->
<door-widget>
    <p>Text on door</p>
    <p>Text behind door</p>
</door-widget>

<!-- template cloned into shadow DOM -->
<div class="door-widget">
    <div class="door">
        <div class="knob"></div>
        <!-- first p will be moved here -->
    </div>
    <div class="content">
        <!-- second p will be moved here -->
    </div>
</div>

element.addEventListener(eventName, callbackfn);

new Event(typeArg)
new Event(typeArg, eventInit);

const event = CustomEvent(eventName, { detail: yourData });

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>

729G87 Interaction Programming¶

Lecture 4¶

Johan Falkenjack, johan.falkenjack@liu.se¶

Lecture overview¶

Project¶

Optional project points for implementation¶

Assignment 4¶

Optional Assignment 5¶

UI Libraries

libraries that provide custom UI components

Common approaches to UI components using HTML, CSS, JS¶

Accordion, using traditional UI components¶

Common approaches to UI components using HTML, CSS, JS¶

Web Components¶

Why use a Web Component?¶

Why base your project on Web Components?¶

Accordion, as implemented by some Web Component libraries¶

What about React, Vue, Angular, etc?¶

Web Components

Creating custom elements with encapsulated style and DOM (the shadow DOM)

Web Components¶

Building blocks of Web Components¶

Defining custom elements¶

Custom elements - defining new HTML tags¶

Classes in JavaScript (ES6+)¶

Example: Class declaration

Special lifecycle callback methods for custom element classes¶

Define custom element using a class¶

Adding a shadow DOM¶

Purpose of a shadow DOM¶

Demo

Web Component without shadow DOM

The shadow DOM¶

Using a shadow DOM¶

Class that adds a shadow DOM¶

Demo

Web Component with shadow DOM

Using <template> to populate a shadow DOM¶

HTML Templates¶

Cloning our <template> and adding its contents to a shadow DOM¶

JS-file with template, class & attached shadow DOM¶

Demo

Web Component using a template

Adding content using attributes, slots or moving nodes¶

Using attributes to customize the web component¶

Using attributes¶

Demo

Web Component using a attributes

Named slots in web components¶

Styling slotted elements is a bit quirky¶

Better way of styling slotted elements¶

Demo

Web Component with named slots in template

Moving elements instead of using slots¶

Demo

Web Component adding image, moving node into a shadow DOM

Using slots vs moving elements into the shadow DOM¶

Web Components

Adding interaction

Where to add event listeners¶

Where to remove event listeners¶

Outline for defining a Web Component¶

Class methods as event handlers¶

Example: Method as an event handler¶

Demo

highlightable paragraph, <p-highlight> toggle color when clicked

Dynamic creation of elements in your web component¶

Demo

Dynamic creation of elements inside shadow DOM

Building blocks of Web Components¶

Example: Animated door widget¶

Demo

Animated Door

Firing and listening to synthetic events

Make it possible to listen to custom events that happen in your custom element.

Creating and firing events¶

Options when creating events¶

What event type should I choose?¶

Creating events with custom data¶

Example: Door widget + synthetic events¶

Using `<template>` to populate a shadow DOM¶

Cloning our `<template>` and adding its contents to a shadow DOM¶

highlightable paragraph, `<p-highlight>` toggle color when clicked

Using the `<door-widget>` in a christmas calendar