title: What's the difference between an unregistered HTML Custom Element and a registered HTML Custom Element?
body: <p>If I fail to register a custom element, I note that I can still:</p>
  <ul>
  <li>style the unregistered element using <strong>CSS</strong></li>
  <li>add events to the unregistered element etc. using <strong>JS</strong></li>
  </ul>
  <p><strong>Example:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// REGISTER &lt;my-custom-element-1&gt;
  class MyRegisteredCustomElement1 extends HTMLElement {
    constructor() {
      super();
    }
  };
  
  customElements.define('my-custom-element-1', MyRegisteredCustomElement1);
  
  // ATTACH EVENT LISTENERS TO BOTH CUSTOM ELEMENTS
  const myCustomElement1 = document.getElementsByTagName('my-custom-element-1')[0];
  const myCustomElement2 = document.getElementsByTagName('my-custom-element-2')[0];
  
  const customElementAlert = (e) =&gt; {
  
    switch (e.target.nodeName.toLowerCase()) {
    
      case ('my-custom-element-1') : console.log('I\'m a registered custom element and I can be scripted and styled.'); break;
      case ('my-custom-element-2') : console.log('I\'m an unregistered custom element. Nevertheless, I can be scripted and styled TOO.'); break;
    }
  }
  
  myCustomElement1.addEventListener('click', customElementAlert, false);
  myCustomElement2.addEventListener('click', customElementAlert, false);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:not(:defined) {
    border: 1px dashed rgb(0, 0, 0);
  }
  
  my-custom-element-1,
  my-custom-element-2 {
    float: left;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 12px;
    padding: 6px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
  }
  
  my-custom-element-1 {
    color: rgb(255, 255, 255);
    background-color: rgb(255, 0, 0);
  }
  
  my-custom-element-1::after {
    content: 'I\'m a registered custom element.\A CLICK ME';
  }
  
  my-custom-element-2 {
    background-color: rgb(255, 255, 0);
  }
  
  my-custom-element-2::after {
    content: 'I\'m an unregistered custom element.\A CLICK ME';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;my-custom-element-1&gt;&lt;/my-custom-element-1&gt;
  &lt;my-custom-element-2&gt;&lt;/my-custom-element-2&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If unregistered custom elements may be styled and scripted, what is it, specifically, that registering a custom element enables?</p>