A stupid web component

Published on

Below you can find a stupid simple web component, that’s it.

On this page I defined the following template:

    #cig-component-container button {
      font-size: 1.5rem;
    #cig-component-container h1 {
      background: black;
      color: white;
      font-weight: bold;
      font-size: 2rem;
      padding: 0.75rem 1.5rem;
  <div id="cig-component-container">

This gets then used by the cig.mjs file, which defines the webcomponent itself:

class CigComponent extends HTMLElement {
  constructor() {
  connectedCallback() {
  disconnectedCallback() {
    this.removeEventListener('click', this.handleButtonClick)
  render() {
    const template = document.querySelector('template')
    const clone = template.content.cloneNode(true)
    const title = clone.querySelector('#cig-component-container h1')
    title.innerText = randomSentence()
  attachEvents() {
    const button = this.querySelector('#cig-component-container button')
    button.addEventListener('click', this.handleButtonClick.bind(this))
  handleButtonClick () {
    const title = this.querySelector('#cig-component-container h1')
    title.innerText = randomSentence()

function randomSentence() {
  const sentences = [
    "Programming can harm you and others around you",
    "Programming harms you, and smoking harms others.",
    "Prioritize well-being, avoid excessive coding and smoking.",
    "Coding and smoking carry risks for you and those nearby.",
    "Healthy habits: code wisely, quit smoking.",
    "Protect yourself and the environment by avoiding smoking while coding.",
  return sentences[Math.floor(Math.random() * sentences.length)]
customElements.define('cig-component', CigComponent)

Here I am using the <cig-component>, you can play with it here 👇

Here, have a slice of pizza 🍕