feat(html): Add example of is global attribute (#2234)

live-examples/html-examples/global-attributes/attribute-is.html

@@ -0,0 +1,5 @@
+<p>Please describe why would you like to work for us:</p>
+
+<div class="length-textarea-container">
+    <textarea is="length-left-textarea" maxLength="150">I would like to work for you because…</textarea>
+</div>

live-examples/html-examples/global-attributes/css/attribute-is.css

@@ -0,0 +1,19 @@
+textarea {
+    width: 100%;
+    height: 100%;
+    resize: none;
+}
+
+.length-textarea-container {
+    position: relative;
+    width: 100%;
+    height: 10em;
+}
+
+.length-textarea-container::after {
+    content: 'Characters left: ' attr(length-left);
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    color: grey;
+}

live-examples/html-examples/global-attributes/js/attribute-is.js

@@ -0,0 +1,18 @@
+class LengthLeftTextarea extends HTMLTextAreaElement {
+  constructor() {
+    super();
+
+    const updateLengthAttribute = (newContent) => {
+      const length = newContent ? newContent.length : 0;
+      const lengthLeft = this.maxLength - length;
+      this.parentNode.setAttribute('length-left', lengthLeft);
+    };
+
+    updateLengthAttribute(this.value);
+    this.addEventListener('input', (e) => {
+      updateLengthAttribute(e.target.value);
+    });
+  }
+}
+
+customElements.define('length-left-textarea', LengthLeftTextarea, { extends: 'textarea' });

live-examples/html-examples/global-attributes/meta.json

@@ -75,6 +75,17 @@
             "type": "tabbed",
             "height": "tabbed-shorter"
         },
+        "is": {
+            "exampleCode": "./live-examples/html-examples/global-attributes/attribute-is.html",
+            "cssExampleSrc": "./live-examples/html-examples/global-attributes/css/attribute-is.css",
+            "jsExampleSrc": "./live-examples/html-examples/global-attributes/js/attribute-is.js",
+            "fileName": "attribute-is.html",
+            "title": "HTML Demo: is",
+            "type": "tabbed",
+            "defaultTab": "html",
+            "tabs": "html,css,js",
+            "height": "tabbed-standard"
+        },
         "lang": {
             "exampleCode": "./live-examples/html-examples/global-attributes/attribute-lang.html",
             "cssExampleSrc": "./live-examples/html-examples/global-attributes/css/attribute-lang.css",