Reimplementing Deprecated

HTML Elements

with Web Components

(An Ode to GeoCities)

Who Am I?

Alex Riviere

Senior Frontend Developer
Co-Host of Enjoy the Vue Podcast
Twitch Streamer
Atlanta Vue.js Meetup and PyATL Co-Organizer

Let's take a trip back in time....

A Brief History of the Web

Nov. 1995 - HTML 2.0 RFC published
Aug. 1996 - IE3 released with CSS support
Jan. 1997 - HTML 3.2 Spec published

A Brief History of the Web

This is the time period that gave us

and other well loved tags

A Brief History of the Web

Dec. 1997

HTML 4.0 RFC published

deprecates a lot of tags

A Brief History of the Web

Mid 1995 - BHI (Beverly Hills Internet) is formed by David Bohnett and John Rezner
- 2MB of free web hosting
- users could join a "neighborhood"
- focused on community
Dec 1995 - BHI rebrands to

GeoCities

GeoCities

A webpage with angled 3d clipart declaring "Dr Dale's Cyber Clinic" with a link that says "Press HERE to enter the Clinic"

A webpage with a repeating background of an orange planet with the text "Welcome" rotating in the header. The page contains the following text in a light blue font, "AS-SALAAM-ALAKIUM Dear Internet Person, You have Entered the World of Hakim please come in and enjoy at your own risk. Hakim's World. My Pages include: The latest News, Graphics, Information from the NBA and NFL. Keep track of world events with CNN."

A website with 3d clip art declaring "Beautiful World" as the title with some low resolution flowers above it. A weird looking pink and blue graphic below that declares "Welcome!"

A website that is titled with gold 3d clipart that says "Babetta's Place" and has a small dove in flight below it.

https://www.cameronsworld.net/

Let's jump ahead a bit

2013 - customElements Proposal

Make your own html elements!

2018 - customElements available in most browsers

(We can probably use this now in 2022.)

Let's jump ahead a bit

2021 - I got bored and nostalgic

(This will not end well.)

geo-elements

geo-elements

Experience the joy of HTML3 with good accessibility
focus on your html, and nothing else
(it's probably a bad idea to use this.)

https://github.com/fimion/geo-elements

How to make

Custom Elements

Let's make a <blink> Tag

class GeoElementBlink extends HTMLElement{
  constructor(){
    super();
    this.attachShadow({mode:'open'});
    const style = document.createElement('style');
    const slot = document.createElement('slot');
    style.textContent = `
    :host{ font-size:inherit; line-height:inherit;}

    slot{ animation: 2s linear infinite condemned_blink_effect; }

    @keyframes condemned_blink_effect { 0% {visibility: hidden;} 50% {visibility: hidden;} 100% {visibility: visible;} }

    @media (prefers-reduced-motion) {
      slot { animation:none; text-shadow: 0 0 0.1rem red, 0 0 0.2rem orange, 0 0 0.3rem yellow, 0 0 0.4rem green, 0 0 0.5rem blue, 0 0 0.6rem indigo, 0 0 0.7rem violet;}
   }`;
    this.shadowRoot.append(style,slot);
  }
}

customElements.define('ge-blink', GeoElementBlink);

Let's make a <blink> Tag

quick review

create a by extending an HTMLElement
always call super() first in your constructor
use this.attachShadow({mode:'open'}) to attach shadowDOM
use this.shadowRoot.append to add elements to the shadowDOM
make sure to add a slot element to display child content.
register your new element with window.customElements.define

Let's talk about attributes

Let's make a <background> Tag

class GeoElementBackground extends HTMLElement {
  static get observedAttributes() {
    return ["background", "bgcolor", "inline"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    switch (name) {
      case "background":
        this.updateImage(newValue);
        break;
      case "bgcolor":
        this.updateColor(newValue);
        break;
      case "inline":
        this.updateInline(newValue);
        break;
    }
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.imageStyle = document.createElement("style");
    this.colorStyle = document.createElement("style");
    this.inlineStyle = document.createElement("style");
    const slot = document.createElement("slot");
    this.shadowRoot.append(
      this.imageStyle,
      this.colorStyle,
      this.inlineStyle,
      slot
    );

    this.updateImage();
    this.updateColor();
    this.updateInline();
  }

  updateStyle(type, value) {
    this[type + "Style"].textContent = value;
  }

  updateImage(value) {
    if (!value) {
      this.updateStyle("image", "");
    } else {
      this.updateStyle("image", `:host{background-image:url(${value});}`);
    }
  }

  updateColor(value) {
    if (!value) {
      this.updateStyle("color", `:host{background-color: transparent;}`);
    } else {
      this.updateStyle("color", `:host{background-color: ${value};}`);
    }
  }

  updateInline(value) {
    if (!value) {
      this.updateStyle(
        "inline",
        `:host{display:block; min-height: 100vh; min-width: 100vw;}`
      );
    } else {
      this.updateStyle("inline", `:host{display:inline-block;}`);
    }
  }
}

customElements.define("ge-background", GeoElementBackground);

Let's make a <background> Tag

quick review

static get observedAttributes() returns an array of attributes that should be watched for changes
attributeChangedCallback will be called each time an observedAttribute is modified.

Let's Make a

<marquee>

<marquee> is weird

Let's make a <simple-marquee>

class SimpleMarquee extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    const style = document.createElement("style");
    this.divElement = document.createElement("div");
    this.divElement.append(document.createElement("slot"));
    style.textContent = `:host {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-align: initial;
    white-space: nowrap;
}
div{
  display: inline-block;
    overflow: hidden;
    text-align: initial;
    white-space: nowrap;
}
`;
    this.shadowRoot.append(style, this.divElement);
    const animation = this.divElement.animate(
      [
        { transform: `translateX(${this.clientWidth}px)` },
        { transform: `translateX(-${this.divElement.scrollWidth}px)` }
      ],
      {
        duration: (this.offsetWidth+this.divElement.scrollWidth) / (6/85),
        iterations: Infinity
      }
    );
  }
}

customElements.define("simple-marquee", SimpleMarquee);

Let's make a <simple-marquee>

```
connectedCallback
```
```
adoptedCallback
```
```
disconnectedCallback
```

Let's FIX <simple-marquee>

class SimpleMarquee extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    const style = document.createElement("style");
    this.divElement = document.createElement("div");
    this.divElement.append(document.createElement("slot"));
    style.textContent = `:host {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-align: initial;
    white-space: nowrap;
}
div{
  display: inline-block;
    overflow: hidden;
    text-align: initial;
    white-space: nowrap;
}
`;
    this.shadowRoot.append(style, this.divElement);
    this.currentAnimation = null;
  }

  startAnimation() {
    if (this.currentAnimation) {
      this.currentAnimation.cancel();
    }

    this.currentAnimation = this.divElement.animate(
      [
        { transform: `translateX(${this.clientWidth}px)` },
        { transform: `translateX(-${this.divElement.scrollWidth}px)` }
      ],
      {
        duration: (this.offsetWidth + this.divElement.scrollWidth) / (6 / 85),
        iterations: Infinity
      }
    );
  }

  connectedCallback() {
    this.startAnimation();
  }

  adoptedCallback() {
    this.startAnimation();
  }

  disconnectedCallback() {
    if (this.currentAnimation) {
      this.currentAnimation.cancel();
    }
    delete this.currentAnimation;
  }
}

customElements.define("simple-marquee", SimpleMarquee);

Let's FIX <simple-marquee>

Let's Review

Use the connectedCallback method to handle being added to the dom
Use the adoptedCallback to handle being moved from one document to another (generally between iframes)
Use disconnectedCallback to clean up anything before an element is destroyed

What's next?

Lit - https://lit.dev
Stencil - https://stenciljs.com/
Vue 3 - https://vuejs.org/guide/extras/web-components.html
Svelte - https://svelte.dev/docs#run-time-custom-element-api
Angular - https://angular.io/guide/elements
React - https://reactjs.org/docs/web-components.html

Use a Framework

Thank you.

Slides: https://slides.com/fimion/that-conf-wi-2022
Codepens: https://codepen.io/collection/ZMyRop

For More Terrible Things:

My Twitch: @fimion
My Blog: alex.party
My Twitter: @fimion