JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<!DOCTYPE html>
<html>
   <body>
      <div class="container">
      
         <h1>Custom HTML Elements</h1>
         
         <p>Here is a basic example to use an HTML element</p>
         
         <p>HTML code</p>
         <pre><code>&lt;ecms-element&gt;&lt;/ecms-element&gt;</code></pre>
         
         <p>
         Output
         </p>
         <ecms-content onload="GetData()" id="ecms" data-fid='001'></ecms-content>
         
         <ecms-content onload="GetData()" class="ecms" data-toc></ecms-content>
         
         <hr>
         
         <h2>HTML Global Attributes</h2>
         <p>
            The global attributes are attributes that can be used with all HTML elements.
         </p>
         <table class="ws-table-all notranslate">
            <tbody>
               <tr>
                  <th style="width:25%">Attribute</th>
                  <th>Description</th>
               </tr>
               <tr>
                  <td><a href="att_global_accesskey.asp">accesskey</a></td>
                  <td>Specifies a shortcut key to activate/focus an element</td>
               </tr>
               <tr>
                  <td><a href="att_global_class.asp">class</a></td>
                  <td>Specifies one or more classnames for an element (refers to a class in a style sheet)</td>
               </tr>
               <tr>
                  <td><a href="att_global_contenteditable.asp">contenteditable</a></td>
                  <td>Specifies whether the content 
                     of an element is editable or not
                  </td>
               </tr>
               <tr>
                  <td><a href="att_global_data.asp">data-*</a></td>
                  <td>Used to store custom data private to the page or application</td>
              ...

CSS

ecms-element {
  display: block;
  unicode-bidi: isolate;
  width: 100%;
  height: 250px;
  background: #EEEEEE;
  border: 1px solid #CCCCCC;
}

JavaScript

class ECMSElement extends HTMLElement {
    connectedCallback() {
/*         this.innerHTML = `<h1>Hello World...</h1>`;
        this.style.color = "red"; */
    }
}

customElements.define('ecms-content', ECMSElement);

// const collection = document.getElementsByTagName("ecms-element"); 

 

window.onload = function GetData() {
/* 	var ecmsType = ecms.getAttribute('data-fid');
	 */
	const ecms = document.querySelectorAll('ecms-content');
// To return all matches (not only the first), use the querySelectorAll() instead.
	//console.log(ecms);

  for (i = 0; i < ecms.length; i++) {
      console.log(ecms[i]);

/*     console.log(ecms[i].dataset);
     */		alert(ecms[i].dataset.fid);
  } 

	//alert(ecms.dataset.fid);

	/* var ecmsType = document.getElementsByTagName("ecms-element");  */

  /* alert("The " + animal.innerHTML + " is a " + animalType + "."); */
  /* alert("Fid: " + ecmsType + ".") ;*/
}