HTML/JS: Extending/Overriding native html elements

Question

Due to many limitations in native html elements, I am wondering if it is possible to extend a native html element using web components and have my own customized behavior. I've seen a pages on this but the examples are very simple and weak such as adding a confirmation for anchor tags. I'm not talking about adding something simple, i want to modify behavior. I want for a datalist to always show all option elements, or even have my own filtering logic. I can never find the implementation code of these native elements so i can't try this.

Creating a custom element is not an option (unless for extending a native element). In my company we use openfin for small web apps. We use native datalist because we need our elements to be able extend beyond the viewport boundaries (custom stuff will get clipped out).

How about creating a custom element? https://www.html5rocks.com/en/tutorials/webcomponents/customelements/ — Shivashriganesh Mahato, Apr 16 '20 at 01:08
Nah can't use custom elements. I updated my post to explain why. — goldensausage, Apr 16 '20 at 01:13
If you can't use Custom Elements, then please remove all ``web-component`` tags from your question; Web Components are Custom Elements **with** shadowDOM. — Danny '365CSI' Engelman, Apr 16 '20 at 07:27
i will update my question as i didnt explain clearly. I did not mean we cannot use custom elements. I assume Shiv meant using a custom element to try to do what a datalist does, that is not acceptable. But extending native html elements IS acceptable, that uses web components. — goldensausage, Apr 16 '20 at 15:52

score 0 · Answer 1 · edited Apr 03 '22 at 01:06

Below is a link for the webcomponents introduction:
https://www.webcomponents.org/introduction

In that page they have links to examples on how to implement them, like the one below:
https://www.npmjs.com/package/@polymer/paper-button

The previous information should give you an idea about the implementation and dependencies needed. You can add different capabilities via scripts and even more modifications via CSS.

Even if web components are based on existing web standards their usage might require some cross-site communication and at times script/spam blockers might not allow them. Due to compatibility and the previously mentioned I avoid their use until fully adopted in HTML standards and DOM specifications(specs).
To make it more interesting, this HTML standards and DOM specs can change at any moment.

For HTML standards: https://html.spec.whatwg.org/ https://www.w3.org/standards/webdesign/htmlcss

For DOM specs: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction http://www.w3.org/DOM/ https://dom.spec.whatwg.org/

Recommendations from someone that is being in this field for a while(me):
- Use what you can make work with the current devices/browsers as things change.
- Similar webcomponents behavior/feel/look can be achieved with combinations of HTML/CSS/Javascript.
- As stated earlier, things change and there's nothing wrong on learning something new as this experimental webcomponents below(they might or might not be implemented):
https://www.webcomponents.org/author/fs-webcomponents

Here is a Snippet with an Old list that I created:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0.80, user-scalable=yes">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Item1Form</title>
<script type="text/javascript" src="formState.js"></script>

</head>
<body>
<html>
    <body>
    <div title="List" style="background-color:white; color:gray; width:480px; margin-left: auto; margin-right: auto; text-align:center; border:groove 20px; border-color:darkgreen; border-radius:20px; padding: 1em;">
          <form name="Item1form" id="cool_undoable" method="post" action="Item1Post.php" target="_blank">
    
    <div align="right" style="position: relative; left: 34px; top: -14px; height: 22px; width: 460px; padding: 0em;">

    <input type="submit" id="search-submit" value="SAVE | SALVAR" style="text-decoration: underline; background:lime; border:outset 4px; border-color:lime; border-radius:4px;"  onmouseover="style='text-decoration: underline; background:lightgreen; font-weight: bold; cursor:pointer; border:inset 4px; border-color:lime; border-radius:4px;'" onmouseout="style='text-decoration: underline; background:lime; border:outset 4px; border-color:lime; border-radius:4px;'"/>
    

<input title="Undo" type="button" onClick="window.location.reload(true);" name="Undo" value="<--]" >

<script type="text/javascript" >//  <input title="Redo" type="button" onFocus="this.blur()" onClick="formState.redo(this)" name="Redo" value="[-->">    
    </script>
    <script type="text/javascript">
    function Item1Clear() {
    ClearVal = confirm("Clear List:\n\n" + "        " + document.forms[0].item1.value + "\n\nAre you sure?");
     if( ClearVal == true ){document.forms[0].item1.value = ""; document.forms[0].item1.focus(); return true;}
     else
     {document.forms[0].item1.focus(); return false;}
     }
      </script>
    <input  title="CLEAR" onclick="Item1Clear();" value="CLEAR | BORRAR" type="button" style="text-decoration: underline; background:orange; border:outset 4px; border-color:orange; border-radius:4px;"  onmouseover="style='text-decoration: underline; background:darkorange; font-weight: bold; cursor:pointer; border:inset 4px; border-color:darkorange; border-radius:4px;'" onmouseout="style='text-decoration: underline; background:orange; border:outset 4px; border-color:orange; border-radius:4px;'" />
    
    <input type="button" id="LogOut" value="LogOut" onclick="window.location.href='index.php?'; ; history.go(-1); window.location.href='index.php?'; window.close(self);" 
style="text-decoration: underline; background:tomato; border:outset 4px; border-color:red; border-radius:4px;"  onmouseover="style='text-decoration: underline; background:red; font-weight: bold; cursor:pointer; border:inset 4px; border-color:darkred; border-radius:4px;'" onmouseout="style='text-decoration: underline; background:tomato; border:outset 4px; border-color:red; border-radius:4px;'" />


  
 
 
   

  
  </div>
   
    
  
        <script type="text/javascript">
window.onload = Item1LoadXML();
    function Item1LoadXML() {
    var xmlhttp;
    if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
    xmlhttp.onreadystatechange=function()
      { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("Item1UDiv").innerHTML=xmlhttp.responseText.split("\n").slice(-2).join("\n"); }}//lines to show on red
    xmlhttp.open("GET","Item1ULog.txt",true);
    xmlhttp.send(); }
</script>
<div id="Item1UDiv" style="background-color:#FFFFCC; font-size:12px">Last User</div>
        <textarea name="item1" id="item1" cols="54" rows="8" autofocus>Data will be added here.</textarea>         <br />



            <script type="text/javascript">
    function addText(event) {
//alert(event.srcElement.innerText); event.srcElement.innerText == ""; event.srcElement.innerText.indexOf("$") == 1 &#36;

if (event.srcElement.innerText.indexOf("$") > -1) {return false}
else 
{

var targ = event.target || event.srcElement;
document.getElementById("item1").value += targ.textContent + ". " || targ.innerText;
//  document.forms[0].item1.focus(); 
}


}



    </script>
    
    <div style="overflow:scroll; height:400px; width:490px; ">
<table width="480px" style="font-size:18px"><th align="left">Type or Click the Item to add: </th></table>

<style type="text/css">
 .scrollable1{
  overflow: scroll;
   height: 160px; /* adjust this width depending to amount of text to display */
    width: 88px; /* adjust height depending on number of options to display */
   border: 1px silver solid;
 color:black; background-color:bisque; font-size:16px; font-style:italic; }
 
  .scrollable2{
  overflow: scroll;
   height: 160px; /* adjust this width depending to amount of text to display */
    width: 88px; /* adjust height depending on number of options to display */
   border: 1px silver solid;
 color:black; background-color:azure; font-size:16px; font-style:italic; }

.bloc { width:100px;  /*adjusted to always display both scrolls as wide as the widest line no <br> or  */}

.pb { margin-top:6px; color:blue; font-size:14px; text-decoration: underline; font-style:normal; line-height:2px; height:4px; }
.pb:hover { cursor:pointer; font-size:14px; text-decoration:underline; color:blue; }
</style>

<table width="480"> 
  <tr>
<td><strong>Fruits:</strong>
<div class="scrollable1">   
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Apples</pre>
<pre class="pb">Bananas</pre>
<pre class="pb">Grapefruit</pre>
<pre class="pb">Grapes</pre>
<pre class="pb">Melon</pre>
<pre class="pb">Oranges</pre>
<pre class="pb">Pineaple</pre>
<pre class="pb">Plums</pre>
<pre class="pb">Strawberries</pre>
<pre class="pb">Tangerines</pre>
<pre class="pb">Watermelon</pre>
</span>
</div></div>
</td>
    <td>
<strong>Veggies+:</strong>
<div class="scrollable2">   
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Beans</pre>
<pre class="pb">Carrots</pre>
<pre class="pb">Ginger</pre>
<pre class="pb">Lettuce</pre>
<pre class="pb">Onions</pre>
<pre class="pb">Peas</pre>
<pre class="pb">Plantains</pre>
<pre class="pb">Potatoes</pre>
<pre class="pb">Rice-brown</pre>
<pre class="pb">Rice-white</pre>
<pre class="pb">Sweet potatoes</pre>
</span>
</div></div>
</td>
    <td>
<strong>Cold+Frozen:</strong>
<div class="scrollable1">
<div class="bloc">  
Cold:
<span onclick="addText(event)">
<pre class="pb">Butter</pre>
<pre class="pb">Cheese</pre>
<pre class="pb">Eggs</pre>
<pre class="pb">Milk</pre>
<pre class="pb">Yogurt</pre>
</span></div>
Frozen:
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Broccoli</pre>
<pre class="pb">Cauliflower</pre>
<pre class="pb">Chick peas</pre>
<pre class="pb">Corn</pre>
<pre class="pb">Ice cream</pre>
<pre class="pb">Mixed veggies</pre>
</span></div>
</div>
    </td>
    <td>
<strong>Meat+Sea:</strong>  
<div class="scrollable2">
Meat:
<div class="bloc">
<span onclick="addText(event)"> 
<pre class="pb">Chicken</pre>
<pre class="pb">Ham</pre>
<pre class="pb">Meat</pre>
</span></div>
Sea:
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Fish</pre>
<pre class="pb">Salmon</pre>
<pre class="pb">Shrimp</pre>
</span></div>
</div>  
    </td>
    <td>
<strong>Cans+Packs:</strong>
<div class="scrollable1">
Cans:
<div class="bloc">
<span onclick="addText(event)">
    <pre class="pb">Canned chicken</pre>
    <pre class="pb">Canned tuna</pre>
</span></div>
Packs:
<div class="bloc">
<span onclick="addText(event)"> 
<pre class="pb">Almonds</pre>
<pre class="pb">Bread</pre>
<pre class="pb">Dry cranberries</pre>
<pre class="pb">Oatmeal</pre>
<pre class="pb">Peanuts</pre>
<pre class="pb">Prunes</pre>
<pre class="pb">Raisins</pre>
<pre class="pb">Seeds-flax<i onclick="alert(this.innerHTML);"> $0.99 FancyFruits Colonial</i></pre> 
<pre class="pb">Seeds-pumpkin</pre>
<pre class="pb">Seeds-sunflower</pre>   
</span></div>
</div>
    </td>
     </tr>
</table>


<table width="480"> 
  <tr>
<td>
<strong>Flavors:</strong>
<div class="scrollable2">   
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Cinnamon</pre>
<pre class="pb">Chocolate powder</pre>
<pre class="pb">Coffee</pre>
<pre class="pb">Dressings</pre>
<pre class="pb">Honey</pre>
<pre class="pb">Mayonnaise</pre>
<pre class="pb">Salt-iodized</pre>
<pre class="pb">Sugar-brown</pre>
<pre class="pb">Sugar-white</pre>
<pre class="pb">Vinegar</pre>
</span>
</div></div>
</td>
    <td>
<strong>Beverages:</strong>
<div class="scrollable1">
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Juice</pre>
<pre class="pb">Water</pre>
<pre class="pb">Water-Coconut</pre>
</span></div>   
</div>
    </td>

    <td>
<strong>Health:</strong>
<div class="scrollable2">
<div class="bloc">
Suplements: 
<span onclick="addText(event)">
<pre class="pb">Amino acids</pre>
<pre class="pb">Calcium</pre>
<pre class="pb">Echinacea</pre>
<pre class="pb">Ginkgo biloba</pre>
<pre class="pb">Glucosamine</pre>
<pre class="pb">Hair-Vitamins</pre>
<pre class="pb">L-lysine</pre>
<pre class="pb">Magnesium</pre>
<pre class="pb">Protein</pre>
<pre class="pb">Saw palmetto</pre>
</span></div>
<div class="bloc">
Medicinal:
<span onclick="addText(event)">
<pre class="pb">Anti-acid</pre>
<pre class="pb">Aspirin</pre>
<pre class="pb">Cream analgesic</pre>
<pre class="pb">Cream anti-fungal</pre>
<pre class="pb">Cream anti-itch</pre>
<pre class="pb">Drops-eyes</pre>
<pre class="pb">Drops-nose</pre>
<pre class="pb">Nyquil</pre>
<pre class="pb">Pepto</pre>
</span></div>
</div>
    </td>
    
    <td>
<strong>Hygiene:</strong>
<div class="scrollable1">
<div class="bloc">
<span onclick="addText(event)">
<pre class="pb">Dental</pre>
<pre class="pb">Deodorant</pre>
<pre class="pb">Q-tips</pre>
<pre class="pb">Razors</pre>
<pre class="pb">Rinse</pre>
<pre class="pb">Shampoo</pre>
<pre class="pb">Soap-feminine</pre>
<pre class="pb">Soap-gel</pre>
<pre class="pb">Soap-hand</pre>
<pre class="pb">Talc</pre>
<pre class="pb">Toilet paper</pre>
<pre class="pb">Tooth paste</pre>
<pre class="pb">Wipes</pre>
</span></div>
</div>
</td>   
    
    <td>
<strong>Household:</strong> 
<div class="scrollable2">
<div class="bloc">
<span onclick="addText(event)"> 
<pre class="pb">Clorox</pre>
<pre class="pb">Dish soap</pre>
<pre class="pb">Insect killer</pre>
<pre class="pb">Insect repellent</pre>
<pre class="pb">Laundry-detergent</pre>
<pre class="pb">Laundry-dryer-sheets</pre>
<pre class="pb">Laundry-rinse</pre>
<pre class="pb">Pine-sol</pre>
</span></div>
</div>  
    </td>

   
  </tr>
</table>
 



    </div>
          </form></div>
    </body>
</html>

HTML/JS: Extending/Overriding native html elements

1 Answers1