Web组件和带有占位符的JS DOM元素

Question

最近，每个人都在使用Web组件培训以获取与框架无关的UI元素。当我阅读本文时，它看起来是一种通过浏览器编写自定义元素的本地方法。但是我有一个类似的问题。 js扩展div（placeholders）以增强并提供我们需要的功能的方式有何不同。

例如：如果我想要一个表格组件Web组件：<my-table></my-table> ---- JS中的相应代码---编译为js文件并在外部脚本中使用

JS方式：<div id="my-table"></div> ---- JS中的代码----编译为JS并在脚本标签外部使用我以ag-grid示例为例]

例如：ag-grid https://www.ag-grid.com/javascript-grid/

<div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>

new agGrid.Grid(gridDiv, gridOptions);

一个人与另一个人有什么区别和好处？请帮助

Answer 1

我的第一反应是]

ES5和ES6有什么区别？ （除非您仍在使用ES3）

有这么多差异，很快就会成为Apple与Apple的比较。

阅读那里的所有博客，使用自定义元素，学习。

---

区别和好处

假设客户需要页面上的三个网格：

• 您添加3个DIV：<div id="myGrid1" .../><div id="myGrid2" .../><div id="myGrid3" .../>

• 要激活它们，您还必须添加：new agGrid.Grid(document.getElementById("myGird1")new agGrid.Grid(document.getElementById("myGird2")new agGrid.Grid(document.getElementById("myGird3")

• 如果JavaScript执行before

DOM元素存在，这将导致严重错误因此，您添加了一个事件监听器：window.addEventListner("onload",()=>ActivateGrids());

请注意，您如何在此处添加（某种类型的）全局函数；因此，只要动动手指，其他任何人都不会覆盖您的宝贵代码；您是有史以来最好的程序员，因此您检查了那里的每个NPM库，并选择了一个尚未使用的函数名。

• 考虑到上述含义，您决定安全使用它

  • 您将所有ID重命名为真正独特的名称
  • 您将所有BEM CSS样式重命名为真正唯一的名称
  • React，Angular，Vue（部分）为您执行此操作，但是您需要使用本机JavaScript，因此必须手动进行。

为什么不起作用？您触发F12，调试并猛击头……您在ID中输入了错误。grid和gird

2天后...该死！客户想要第四个网格！在他使您成为第5位错误之前，您决定重构ActiveGrids函数以处理页面中任意数量的网格[...document.querySelectorAll('[id*="MyuniQueIDgridComponent_KUT!"]')].forEach(...)

我们有一个组件！

play Queen, We are the Champions! now

[3周后，客户提出了非常简单的要求，您可以在半小时内完成此操作

，他说。 我们要更改背景颜色，并在DIV上添加属性

您很困惑，正在使用DIV属性更改属性！？！他们为什么不能只调用JavaScript Grid实例！（您几年前曾试图教育您的客户；只雇用SENIOR Web Developers ...，但他不会听]]）]

但是客户支付抵押贷款；因此，您将了解MutationObserver，并将其粘贴在BODY标签上。（这句话很容易写，但是会花费很大的力气！）

[5个月后，客户说他不想再雇用您，因为在其PWA中添加/删除网格会导致内存泄漏。

输入自定义元素API（又名Web组件）

使用框架，所有上述操作都更容易。

但是您想构建一个可重用的组件，而不是构建由[[with组件

]构建的应用程序

• 所以您决定使用Native Custom Elements API

您设计（最终）用户将如何使用您的组件：

<KCB-grid rows=3 columns=5 background=color ></KCB-grid>

然后对组件进行编程。我从您的Twitter句柄中使用

KCB-

命名空间

哪个版本可以在任何现代浏览器中使用

适用于所有框架和库（除了在React中，您需要做额外的工作..因为Facebook有它自己的“标准”）https://custom-elements-everywhere.com/libraries/react/results/results.html

没有onload问题，元素是否在脚本之前或之后声明都没关系。

您可以随时执行.innerHTML = "<KCB-Grid></KCB-Grid>"。

客户也希望这样做，但聘请了另一个程序员使用“自定义元素”来完成此任务：

<template id="KCB-GRID">
  <!-- use TEMPLATES! don't mess with JSX, CSSinJS or HTML in textstrings! -->
  <style>
    #grid { /* no BEM, no forced unique IDs or style names */
      display: grid;
      grid-template-columns: repeat(var(--columns), 1fr);
      grid-template-rows: repeat(var(--columns), 1fr);
      gap: .2em;
    }
    #grid div {
      background: var(--background);
      text-align: center;
    }
  </style>
  <div id=grid></div>
</template>

<KCB-Grid columns=5 rows=3 background=#FF9933></kcb-grid>
<KCB-Grid columns=3 rows=3 background=white></kcb-grid>
<KCB-Grid columns=4 rows=3 background=#138808></kcb-grid>

<script>
  customElements.define('kcb-grid', class extends HTMLElement {
    static get observedAttributes() {
      return ["background", "columns", "rows"]
    }
    constructor() {
      super().attachShadow({ mode: 'open' })
             .append(document.getElementById(this.nodeName).content.cloneNode(true));
      this.grid = this.shadowRoot.querySelector("#grid");
    }
    connectedCallback() {
      const random = (x, y) => Math.floor(Math.random() * (y + 1 - x) + x);
      this.grid.onclick = () => {
        this.setAttribute("columns", random(2, 6));
        this.setAttribute("rows", random(1, 4));
      }
    }
    attributeChangedCallback(name, oldValue, newValue) {
      this.render();
    }
    setProperty(name, value = this.getAttribute(name)) {
      this.grid.style.setProperty("--" + name, value);
      return value;
    }
    render() {
      let columns = this.setProperty("columns");
      let rows = this.setProperty("rows");
      this.setProperty("background");
      this.grid.innerHTML = "<div>Hello World!</div>".repeat(columns * rows);
    }
    disconnectedCallback() {} //clean memory, remove listeners, etc.
  });
</script>

还有更多自定义元素

<slot></slot>

shadowParts ::part

构造的样式表

扩展HTML元素，以便使用单个标签<img is=flag-india> displays a SVG flag

...

...