JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<style>
  howto-toggle-button {
    background-color: #eee;  
    padding: 3px;
    cursor: default;
    user-select: none;
    border: 1px solid #333;
    border-radius: 3px;
    transition: background-color .2s ease;
  }

  howto-toggle-button[pressed],
  howto-toggle-button:not([disabled]):active {
    background-color: #999;
  }

  howto-toggle-button[disabled] {
    opacity: 0.35;
  }
</style>

<howto-toggle-button>Press me</howto-toggle-button>

<div><p>hello</p></div>

CSS

div:active {
    border: 2px solid blue;
}

DIV::after {
  content: "hello world I'm an pseudo element";
  display: block;
  width: 300px;
  height: 300px;
  background: cornflowerblue;
  transition: transform .5s;
}

DIV:active::after {
  transform: scale(2);
}



/* DIV:active P {
  transform: scale(2);
}

DIV:active P {
  transition: transform .5s;
} */

JavaScript

/**
 * Copyright 2017 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
(function() {
  /**
   * Define key codes to help with handling keyboard events.
   */
  const KEYCODE = {
    SPACE: 32,
    ENTER: 13,
  };

  /**
   * Cloning contents from a &lt;template&gt; element is more performant
   * than using innerHTML because it avoids addtional HTML parse costs.
   */
  const template = document.createElement('template');
  template.innerHTML = `
    <style>
      :host {
        display: inline-block;
      }
      :host([hidden]) {
        display: none;
      }
    </style>
    <slot></slot>
  `;

  // HIDE
  // ShadyCSS will rename classes as needed to ensure style scoping.
  ////////////////ShadyCSS.prepareTemplate(template, 'howto-toggle-button');
  // /HIDE

  class HowToToggleButton extends HTMLElement {
    static get observedAttributes() {
      return ['pressed', 'disabled'];
    }

    /**
     * The element's constructor is run anytime a new instance is created.
     * Instances are created either by parsing HTML, calling
     * document.createElement('howto-toggle-button'), or calling new HowToToggleButton();
     * The construtor is a good place to create shadow DOM, though you should
     * avoid touching any attributes or light DOM children as they may not
     * be available yet.
     */
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
     ...