improve tag-name-input functionality

Author: keithamus

css/learn.css

@@ -74,18 +74,23 @@ main > h1 {
   border: var(--border-size-2) solid var(--gray-3);
 }
 
-.interactive-input input ~ .icon {
+.interactive-input input ~ :where(.valid, .error, .hint) {
   display: none;
 }
 
-.interactive-input input:invalid ~ :where(.error, .icon-false) {
+.interactive-input input:invalid ~ .error {
   color: var(--red-5);
-  display: inline-block;
+  display: block;
 }
 
-.interactive-input input:not(:placeholder-shown):valid ~ :where(.error, .icon-true) {
+.interactive-input input:not(:placeholder-shown):valid ~ .valid {
   color: var(--green-5);
-  display: inline-block;
+  display: block;
+}
+
+.interactive-input input ~ .hint:has(span:not(:empty)) {
+  color: var(--blue-5);
+  display: block;
 }
 
 .content {

learn/components/naming-your-components.md

@@ -23,9 +23,18 @@ Try typing a tag name below to see if it's a valid custom element tag:
 <label class="interactive-input">
   Tag Name:
   <input type="text" is="tag-name-input" placeholder="fancy-button">
-  <br>
-  {% icon "false" %}{% icon "true" %}
-  <span class="error"></span>
+  <p class="valid">
+    {% icon "true" %}
+    <span>Valid custom element name!</span>
+  </p>
+  <p class="error">
+    {% icon "false" %}
+    <span></span>
+  </p>
+  <p class="hint">
+    {% icon "info" %}
+    <span></span>
+  </p>
 </label>
 
 ### Some tag names are reserved

script/tag-name-input.js

@@ -1,4 +1,4 @@
-import {validTagName, reservedTags, PCENChar } from 'eslint-plugin-custom-elements/lib/tag-names.js' 
+import { validTagName, reservedTags, PCENChar, builtInTagMap } from 'eslint-plugin-custom-elements/lib/tag-names.js' 
 
 const validChar = new RegExp(`^${PCENChar}$`)
 
@@ -12,6 +12,7 @@ customElements.define('tag-name-input', class extends HTMLInputElement {
   handleEvent() {
     const {value} = this
     this.setCustomValidity('')
+    let hint = ''
     if (value) {
       if (/[A-Z]/.test(value)) {
         this.setCustomValidity(`${value} is not valid, it cannot contain capital letters`)
@@ -28,12 +29,22 @@ customElements.define('tag-name-input', class extends HTMLInputElement {
         for (const char of value) {
           if (!(validChar.test(char))) chars.add(char)
         }
-        this.setCustomValidity(`${value} is not a valid tag name, cannot contain ${[...chars].join(', ')}!`)
+        this.setCustomValidity(`${value} is not a valid tag name, cannot contain ${[...chars].join(', ')}`)
       }
+      
+      const parts = value.split(/-/g)
+      for (const part in parts) {
+        if (part in builtInTagMap) {
+          hint = `${value} is similar to the built-in ${builtInTagMap[part]}`
+        }
+      }
+
     }
     this.reportValidity()
-    const errorEl = this.parentElement.querySelector('.error')
-    errorEl.textContent = this.validationMessage || (value ? 'Valid custom element name!' : '')
+    const errorEl = this.parentElement.querySelector('.error span')
+    errorEl.textContent = this.validationMessage
+    const hintEl = this.parentElement.querySelector('.hint span')
+    hintEl.textContent = hint
   }
 
 }, { extends: 'input' })