将同一小部件​​的多个实例插入页面

Question

在指向特定数据源/API 之后，我有一个呈现条形图 (HTML/CSS/JavaScript) 的小部件。有一个配置参数可以更改数据源/API，所以我可以拥有同一个小部件的多个实例。

是否可以使用 shadow-dom 完成上述操作？我尝试了以下操作，但注意到小部件无法选择正确的 div 元素来执行渲染部分。

        var host = document.querySelector("#" + gadgetContainer.getAttribute("data-grid-id"));
        var root = host.createShadowRoot();

        var template = document.createElement('template');
        template.innerHTML = gadgetContainer.outerHTML; 
        root.appendChild(document.importNode(template.content, true));

以下是执行小部件渲染的 JavaScript 逻辑，为了清楚起见，我删除了数据集和配置。

(function () {
    "use strict";
    //dataset used to plot charts
    var dataTable = {}, //REMOVED
        width = document.querySelector('*::shadow #bar').offsetWidth,
        height = 270,   //canvas height
        config = {}; //REMOVED
    widget.renderer.setWidgetName("bar-chart", "BAR CHART");

    chartLib.plot("*::shadow #bar",config, dataTable);
}());

以下是简单的 HTML div，所有必需的样式表和脚本都在此页面中。

<div id="bar" class="bar"></div>

Answer 1

这是一个重用模板以使用 Shadow DOM 创建同一小部件​​的 2 个实例的最小示例：

var template = document.querySelector( 'template' )

target1.attachShadow( { mode: 'open' } )
       .appendChild( template.content.cloneNode( true ) )
       
target2.attachShadow( { mode: 'open' } )
       .appendChild( template.content.cloneNode( true ) )

<template>
  <style>
    :host { display: inline-block; width:100px; height:50px ; border: 1px solid gray; }
    header { color: blue; font-size:15px; font-weight: bold; }
    section { color: gray; font-size:12px ; }
  </style>
  <header>
     Widget <slot name="number"></slot>
  </header>
  <section>
     Content
  </section>
</template>

<div id="target1"><span slot="number">1</span></div>

<div id="target2"><span slot="number">2</span></div>

请注意，您应该使用 Shadow DOM "v1"，使用 attachShadow() 而不是 createShadowRoot()，因为这是将在 Chrome 以外的浏览器上实现的标准规范。将来会弃用旧版本。

使用<slot>获取light DOM的内容，插入到Shadow DOM中。