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

我有一个小部件，它指向特定的数据源/ 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>

来源

2017-03-20 udarakr

@Supersharp渲染同一窗口小部件的多个实例。 – udarakr

@Supersharp我用更多的代码更新了这个问题。我只使用影子。 – udarakr

下面是一个模板的重复使用的小例子，以创建同一控件的两个实例与阴影DOM：

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>

请注意，您应该使用影子DOM “v1”，attachShadow()而不是createShadowRoot()，因为它是在其他浏览器上实现的标准规范。旧版本将在未来被弃用。

使用<slot>来获取光DOM的内容并将其插入到Shadow DOM中。

来源

2017-03-20 09:45:21 Supersharp

假设我有一个这样的模板，https://jsfiddle.net/4qu6jks3/，我必须执行脚本标记。试过这种方法http://stackoverflow.com/questions/40736326/javascript-not-executing-inside-shadow-dom没有运气。 – udarakr

@udarakr最好的方法是定义一个自定义元素：jsfiddle.net/woekreuc/2。否则你将不得不从外部更新影子dom的内容（或者在插入影子dom之前更新模板的克隆） – Supersharp

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

回答

相关问题