class Rectangle {
    constructor(height, width) {
        console.log("Constructor for Rectangle called.");
        this.height = height;
        this.width = width;
        this._color = null;
    }
    // getter for _color property
    get color() {
        return this._color;
    }
    // setter for color property
    set color(value) {
        console.log("Setter for color property called.");
        if (["red", "blue", "green"].includes(value)) {
            this._color = value;
        } else {
            console.log("ERROR: Bad color!");
        }
    }
    // getter for area property
    get area() {
        console.log("Getter for area property called.");
        // NOTE: use this.methodname() to call a method
        // defined in the class
        return this.calcArea();
    }
    // method for calculating the area
    calcArea() {
        console.log("calcArea() method called.");
        return this.height * this.width;
    }
}
const square = new Rectangle(10, 10);
console.log(`width: ${square.width}`); // 10
console.log(`area: ${square.area}`); // 100
console.log(`initial color: ${square.color}`); // null
square.color = "magenta";
console.log(`color magenta?: ${square.color}`); // null
square.color = "red";
console.log(`color red?: ${square.color}`); // null

Constructor for Rectangle called.
width: 10
Getter for area property called.
calcArea() method called.
area: 100
initial color: null
Setter for color property called.
ERROR: Bad color!
color magenta?: null
Setter for color property called.
color red?: red

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>
  /* CSS rules for the component */
  </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¶

Accordion, as implemented by some Web Component libraries¶

What about React, Vue, Angular, etc?¶

Web Components pros and cons¶

Pros:¶

Cons:¶

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

Define custom element using a class¶

Special lifecycle callback methods for custom element classes¶

Adding a shadow DOM¶

Demo

Web Component without shadow DOM

Purpose of a 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¶

Sidenote: Syntax highlighting of template strings¶

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¶

Styling slotted elements inside the Web Component¶

Demo

Web Component with named slots in template

Moving slotted elements from light DOM to shadow DOM¶

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?¶

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