Javascript 阴影dom<；插槽>；firefox中的标签

有没有办法让影子dom的

元素在firefox中工作

作为一种解决方法，我目前正在使用

for循环

和

.innerHTML

（见下文）从一个对象添加我的所有内容，但这是一种相当丑陋的方法

webcomponents.js作为

标题中的第一个脚本标记添加

html



js

const allContent=[{
标题：“你好”，
}, {
标题：“你好”，
}];
对于（var i=0；i
您可以使用a库来填充被调用的阴影DOM“v1”规范

在使用Sadow DOM API之前，请从
元素加载shadydom.min.js文件

<script src="shadydom.min.js"></script>

<div id="RootDiv">
  <span>Content</span>
</div>

<script>
   var div = document.querySelector( '#RootDiv' )
   div.attachShadow( { mode: 'open' } )
      .innerHTML = 'Content:<slot></slot>'
</script>


内容
var div=document.querySelector（“#RootDiv”）
div.attachShadow（{mode:'open'}）
.innerHTML='Content:'


var div=document.querySelector（“#RootDiv”）
div.attachShadow（{mode:'open'}）
.innerHTML='这是内容：'

单纯阴凉
内容
documentFragments比重新解析整个容器HTML和每个数组元素要好。我以前使用
this.createShadowRoot（）
（通过这种方式，我使阴影dom在firefox中工作）添加了阴影dom，但它似乎不适用于
attachShadow（{mode:'open'}）
<代码>类型错误：this.attachShadow不是函数

@servinlp如果加载shadydom.min.js，则不应使用webcomponents.js

const allContent = [{
        title: "hello",
    }, {
        title: "hello",
    }];

for (var i = 0; i < allContent.length; i++) {
    shadowRoot.innerHTML += "<portfolio-item data-title='"+ allContent[i].title +"'></port-item>";
  }

<script src="shadydom.min.js"></script>

<div id="RootDiv">
  <span>Content</span>
</div>

<script>
   var div = document.querySelector( '#RootDiv' )
   div.attachShadow( { mode: 'open' } )
      .innerHTML = 'Content:<slot></slot>'
</script>