HTML/JS:扩展/覆盖本地HTML元素

由于原生html元素的许多限制，我想知道是否可以使用web组件扩展原生html元素并拥有自己的自定义行为。我已经看到了一些关于这方面的页面，但示例非常简单和薄弱，比如添加锚标记的确认。我不是在说添加一些简单的东西，我想修改行为。我希望数据列表总是显示所有选项元素，甚至有我自己的过滤逻辑。我永远找不到这些原生元素的实现代码，所以我无法尝试。

创建自定义元素不是一个选项(除非用于扩展本机元素(。在我的公司，我们使用openfin进行小型网络应用。我们使用原生数据列表，因为我们需要元素能够扩展到视口边界之外(自定义内容将被裁剪掉(。

下面是Web组件介绍的链接：
https://www.webcomponents.org/introduction

在该页面中，他们有关于如何实现它们的示例的链接，如下面的示例：
https://www.npmjs.com/package/@聚合物/纸张按钮

前面的信息应该让您了解所需的实现和依赖关系。您可以通过脚本添加不同的功能，甚至可以通过CSS进行更多的修改。

即使web组件基于现有的web标准，它们的使用也可能需要一些跨站点的通信，有时脚本/垃圾邮件拦截程序可能不允许它们。由于兼容性和前面提到的，我避免使用它们，直到HTML标准和DOM规范(spec(完全采用为止
为了让它更有趣，这个HTML标准和DOM规范可以随时更改。

对于HTML标准：https://html.spec.whatwg.org/https://www.w3.org/standards/webdesign/htmlcss

对于DOM规范：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introductionhttp://www.w3.org/DOM/https://dom.spec.whatwg.org/

在该领域工作了一段时间的人(我(的建议：
-随着情况的变化，使用您可以在当前设备/浏览器上使用的内容
-类似的网络组件行为/感觉/外观可以通过HTML/CSS/Javascript的组合来实现
-如前所述，情况发生了变化，学习以下实验性网络组件的新内容没有错(它们可能会实现，也可能不会实现(：

https://www.webcomponents.org/author/fs-webcomponents这是一个我创建的旧列表的代码段：

<!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:nn" + "        " + document.forms[0].item1.value + "nnAre 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>

相关内容

最新更新

热门标签：