🥧 TL;DR;

• standard Web Components can provide semantic HTML to Web Writers

• eager for code? Here is the complete JSFiddle https://jsfiddle.net/WebComponents/3kwn4f7e/

• Follow up post: Using UnknownHTMLElements for better semantic HTML

• Live demo: https://pie-meister.github.io
  This PieMeister Web Component is 999 Bytes (yes Bytes)

🥧 What Web technologies are required to draw a Pie Chart in 2021?

🥧 HTML, so many moons ago

Had you asked me the question, when I first learned HTML,

I would have written:

<pie-chart>
  <slice color="green">HTML 100%</slice>
</pie-chart>

🥧 Required technologies in 2021

Alas, using any Charting Library, the modern truth answer is more like:

     <PieChart
        data={[
                { title: 'HTML', value: 10, color: 'green' },
                { title: 'JavaScript', value: 75, color: 'red' },
                { title: 'CSS', value: 15, color: 'blue' },
        ]},
        radius={PieChart.defaultProps.radius - shiftSize}
        segmentsShift={(index) => (index === 0 ? shiftSize : 0.5)}
        label={({ dataEntry }) => dataEntry.value}
        labelStyle={{
          ...defaultLabelStyle,
        }}
      />

Compared to my early Web adventures, you almost have to be a rocket-scientist to get a Pie Chart in a Web Page; not to mention all the skills and tools required to start with a Page in the first place; and then those build steps...

🥧 HTML powered by a Web Component

Since learning HTML in 1994, I have used many Frameworks and Libraries, and payed the price multiple times for using technologies that eventually died.

Now the WHATWG, since 2019, is in complete control of the Web HTML standard, I more and more stick to standard technologies only.

Using modern W3C Standard Web Components my design today in 2021 is:

<pie-chart>
  <slice size="90" stroke="green">HTML</slice>
  <slice size="1"  stroke="red">JavaScript</slice>
  <slice size="9"  stroke="blue">CSS</slice>
</pie-chart>

🥧 HTML is still great!

Mind you, I am slightly biased towards HTML because JavaScript and CSS did not exist when I started with Web Development.

HTML is the primary technology that made the Web great and HUGE.
Everyone with basic (WordPerfect) Word Processing skills could create Web pages in those days.
My retired mum did, my 6 year old niece did.

Everyone with basic HTML skills CAN create a Pie Chart in 2021

Modern Web Development does not have to be all about HTML-in-JS and CSS-in-JS; only Developers are comfortable with.

We can empower a new generation Web Writers with semantic HTML,
by creating Web Components for them.

🥧 What Web Developers will learn in this post

• Create a static Pie Chart with SVG (a core browser technology)

• Create a (very basic, yet powerful) <pie-chart> Web Component to write Pie Charts with semantic HTML

• NO Frameworks, NO Libraries required!
  

<pie-chart>
  <slice size="90" stroke="green">HTML</slice>
  <slice size="1"  stroke="red">JavaScript</slice>
  <slice size="9"  stroke="blue">CSS</slice>
</pie-chart>

• I changed value to size because value is a programmers/maths term. size better expresses what the slice does

• color became stroke because that is the stroke-color attribute name for SVG Elements (see below) and I don't want to confuse users with 2 different names for the same attribute

• For demonstration purposes I have kept <pie-chart> Web Component functionality as minimal as possible

• The use of the unknown element <slice> instead of <pie-slice> is shortly discussed at the bottom of this post. It warrants its own post, discussing pros and cons.

✔️ Web Component technologies used:

• Custom Elements API
  • connectedCallback

❌ Web Component technologies NOT used:

The last section of this post describes how these technologies can enhance a <pie-chart> v2.0 Web Component.

• shadowDOM
• ::part CSS Selector - shadowParts
• slots
• slotchange Event
• templates
• observedAttributes
• lifecycle callbacks - also see this diagram
  • constructor
  • attributeChangedCallback
  • adoptedCallback
  • disconnectedCallback

🥧 Step #1 - Designing the pie

A Pie Slice can easily be created with the SVG circle element:

  <circle stroke="green" stroke-dasharray="10 90" 
          pathLength="100" 
          cx="50%" cy="50%" r="25%" fill="none" stroke-width="50%">
  </circle>

• Key is the pathLength="100" attribute, declaring all calculations on the SVG element consider the <circle> 100 units in length.

• Then stroke-dasharray="10 90" says:

  • draw a green stroke for 10 units
  • add whitespace for 90 units

Multiple slices are drawn with an extra stroke-dashoffset for each slice. The stroke-dashoffset value is the subtracted total of all previously drawn slices.

Each stroke-dashoffset is increased by 25 units, to make the Pie Chart start drawing at the top.

All SVG required for the static Pie Chart is:

<svg viewBox="0,0,200,200">
  <circle stroke="green" stroke-dasharray="10 90" stroke-dashoffset="25" 
          pathLength="100" 
          cx="50%" cy="50%" r="25%" fill="none" stroke-width="50%">
  </circle>
  <circle stroke="blue" stroke-dasharray="25 75" stroke-dashoffset="15" 
          pathLength="100" 
          cx="50%" cy="50%" r="25%" fill="none" stroke-width="50%">
  </circle>
  <circle stroke="red" stroke-dasharray="65 35" stroke-dashoffset="-10" 
          pathLength="100" 
          cx="50%" cy="50%" r="25%" fill="none" stroke-width="50%">
  </circle>
</svg>

🥧 Step #2 - Creating the <pie-chart> Web Component

<pie-chart> SVG Helper methods

Make working with SVG easier (can be copied to any SVG project):

included in the JSFiddle source code as Base class SVGMeisterElement extends HTMLElement

• createSVGElement ( { tag , [attributes] , [innerHTML] , [append] } )
  creates any SVG Element in the SVG NameSpace,
  optional parameters set all attributes, innerHTML and append child Elements
  The element is returned, not added to the DOM

• createSVGCircle ( { configuration })
  creates a SVG <circle> from all configuration parameters

The custom HTML <pie-chart> is replaced with SVG, using the Web Components Custom Elements API

<pie-chart>
  <slice size="90" stroke="green">HTML</slice>
  <slice size="1"  stroke="red">JavaScript</slice>
  <slice size="9"  stroke="blue">CSS</slice>
</pie-chart>

• Each slice provides a size and stroke and a label
• Each slice becomes a SVG <circle>

Web Component notes

• The <pie-chart> Web Component is created once,

• an HTML writer is never confronted with JavaScript code.

• Contrary to traditional libraries, Custom Elements can also be defined AFTER usage in the DOM.
  existing Elements will automagically upgrade once the Custom Elements API defines the <pie-chart> Web Component.

• If the <pie-chart> is not defined (yet) (or JavaScript is disabled)
  CSS creates a decent fallback:
  

    slice {
      display: block
    }
    slice::before {
      content: attr(size) "% "
    }

output:

  90% HTML
  1% JavaScript
  9% CSS

I have decided not to break up this post in two.

Posting the second part next week has no benefit.

If you a are bit overwhelmed by the first part; go grab a a cup of coffee
(or continue next week)

🥧 The Custom Element API bones of the <pie-chart> Web Component

customElements.define( "pie-chart" ,
  class extends SVGMeisterElement { // see JSFiddle, contains the SVG code
    connectedCallback() { // fires on the OPENING <pie-chart> tag
      // wait till <slice> elements are available in the DOM:
      setTimeout(() => this.renderPieChart()); 
    }
    renderPieChart() {
      // ... some configuration variables here, see source code
      this.svg = this.createSVGElement({ // create <svg> Element
        tag: "svg",
        attributes: {
          viewBox: `0 0 ${this.width} ${this.height}`,
        },
        innerHTML: `...`, // default SVG innerHTML content
        append: this.createSlicesWithCircles() // append <circle>s
      });
      this.replaceWith(this.svg); // replace <pie-chart> with <svg>
      this.slices.forEach((slice) => { // loop all <cicle> elements
        const sliceMiddlePoint = slice.getPointAt(this.labelPosition);
        // ... append label
      });
    }
    createSlicesWithCircles() { // process all <slice> inside <pie-chart>
      let offset = 25;
      const slices = [...this.querySelectorAll("slice")];
      // all <slice> elements are returned as <circle>
      this.slices = slices.map((slice) => { 
        // read size from <slice size="90">
        const size = parseFloat(slice.getAttribute("size")); 
        let circle = this.createSVGCircle({ // SVG helper method
          size,
          offset,
          stroke: slice.getAttribute("stroke") // read stroke color
        });
        offset -= size; // every slice at next offset
        return circle;
      });
      return this.slices;
    }
  });

Code notes:

• The standard connectedCallback method is called the moment the opening <pie-chart> tag is appended to the DOM

• thus setTimeout (or anything that waits till the Event Loop is done) is required to wait till all <slice> elements are parsed by the Browser engine. (see StackOverflow post: https://stackoverflow.com/a/70952159/2520800)

• the renderPieChart method

  • creates an <svg>
  • reads all <slice> and adds them as <circle>

• again: It does not matter when the Web Component is defined.
  Above code can be executed before or after page load.

Full working code:

• No Frameworks! No Libraries! No External code!

🥧 Enhancements with more Web Component techologies

Disclaimer: Code Snippets are not full working code, presented to inspire you only.

shadowDOM

Replacing HTML is a bit crude and not flexible. With shadowDOM the SVG can be displayed, and the <pie-chart> HTML will remain active but invisible in the DOM (then called lightDOM)

The Custom Elements API code can be extended with:

constructor() {
  // Documentation that says "use super first in the constructor" is wrong
  let svg = `<svg>...</svg>`; 
  super() // sets and returns this scope
    .attachShadow({mode:"open"}) // sets and returns this.shadowRoot
    .innerHTML = svg;
  this.svg = this.shadowRoot.querySelector("svg");
}

then the line in the renderPieChart method can be deleted

this.replaceWith(this.svg); // replace <pie-chart> with <svg>

slots

SLOTs are placeholders for more complex user-defined content, while still keeping the Web Component in control of how and where the slot content is displayed. With title and description slots defined in the Web Component a <pie-chart> 2.0 could look like:

<pie-chart>
  <div slot="explanation">
    ... any HTML content here
  </div>
  <h1 slot="title">Web Technologies</h1>
  <slice size="90" stroke="green">HTML</slice>
  <slice size="1"  stroke="red">JavaScript</slice>
  <slice size="9"  stroke="blue">CSS</slice>
</pie-chart>

See <template> below where the slot content is used

Related:

• StackOverflow: (long answer) ::slotted & styling slots
• slotchange Event

templates

Templates are re-usable inert snippets of HTML. Can be created in HTML or by Script. Allowing very flexible creation, styling and configuration of (multiple) Web Components:

<template id="PIE-CHART">
  <style>
    /* CSS */
  </style>
  <slot name="title">A Pie Chart<!-- replaced with userdefined content --></slot>
  <svg>
    <defs>
      <filter x="0" y="0" width="1" height="1" id="label">
        <feFlood flood-color="#222" flood-opacity="0.4"/>
         <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>
  </svg>
  <slot name="description"><!-- userdefined content goes here--></slot>
</template>

A constructor can read Templates (in this example an existing DOM <template>)

constructor() {
  // Documentation that says "use super first in the constructor" is wrong
  let template = (id) => this.getElementById(id).content.cloneNode(true);
  super() // sets and returns this scope
    .attachShadow({mode:"open"}) // sets and returns this.shadowRoot
    .append( template( this.nodeName( this.nodeName);
  this.svg = this.shadowRoot.querySelector("svg");
}

observedAttributes

Normal HTML behaviour allow attribute changes to affect what the HTML does/displays.

In the Custom Elements API you can specify which attributes enforce this behaviour

<pie-chart offset="10">
  <slice size="90" stroke="green">HTML</slice>
  <slice size="1"  stroke="red">JavaScript</slice>
  <slice size="9"  stroke="blue">CSS</slice>
</pie-chart>

static get observedAttributes(){
  return ["offset"]
}

attributeChangedCallback( name, oldValue, newValue ){
  if( name=="offset"){
    this.renderPieChart()
  }
}

Now on every offset change the Pie Chart will be rendered with new settings

::part CSS Selector - shadowParts

Since shadowDOM is protected from global CSS manipulation.
Specified parts of the Web Component shadowDOM can be exposed to the 'outside world' for global CSS configuration.

Font-styles and CSS properties do cascade into shadowDOM; see:

<template id="PIE-CHART">
  <slot part="title" name="title">
     A Pie Chart<!-- replaced with userdefined content -->
  </slot>
</template>

global CSS will now style all titles in all <pie-chart> elements

::part(title){
  text-transform: capitalize;
  background: beige;
  border-bottom: 2px solid green;
}

lifecycle callbacks - also see this diagram

• constructor
  Called once

• connectedCallback
  Called on the opening tag of the Web Component, and every time the Element is moved in the DOM (think drag-drop like situations)

• attributeChangedCallback
  Called by every update of an observed attribute

• adoptedCallback
  When moving Elements between multiple documents

• disconnectedCallback
  Called when the Element is removed from the DOM

🥧 To <slice> or not to <pie-slice>, that is the question

• <slice> is not a valid HTML Element, a Linter will complain, but its a valid XML/DOM Element

• The <pie-chart> Web Component works fine with <slice>.

• Nor is it a (defined) Custom Element, which always require at minimum one hyphen (-) in the tagName to distinguish it from (future) HTML Elements.

• So <pie-slice> is also an option, but doesn't have to be a defined Custom Element

• For more pro and cons, see: Unknown Elements for better semantic HTML

🥧 Some afterthoughts

• Trying to do a complete Web Components course in one Dev post is impossible

• SVG Elements (like <circle> can not (yet) be extended

• The Custom Elements API only allows extending HTMLElement. Proper name: Autonomous Elements

• Extending (Customized Built-In) HTML Elements like <button> is not supported in Safari (and won't be)

• An Element <pie-slice> would allow for observedAttributes to work; something that can otherwise only be accomplished by applying the MutationObserver API.

• I didn't go into ES Class OOP functionality. See: https://javascript.info/class

• Copy the JSFiddle, play and learn
  https://jsfiddle.net/WebComponents/3kwn4f7e/