Firefox 中的 shadow dom <slot> 标签答案

【问题标题】：shadow dom <slot> tag in firefoxFirefox 中的 shadow dom <slot> 标签
【发布时间】：2017-05-24 22:33:26
【问题描述】：

有没有办法让 shadow dom 的 <slot> 元素在 firefox 中工作？

作为一种解决方法，我目前正在使用 for loop 和 .innerHTML（见下文）从一个对象添加我的所有内容，但这是一个相当丑陋的方法。

webcomponents.js 被添加为head 中的第一个脚本标签

html

<portfolio-container></portfolio-container>

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>";
  }

【问题讨论】：

documentFragments 会比重新解析整个容器的 HTML 每个数组元素要好。

标签： javascript web-component shadow-dom custom-element slot

【解决方案1】：

您可以使用 a 库来填充名为 shadydom 的 Shadow DOM “v1”规范。

在使用 Sadow DOM API 之前，从 <script> 元素加载 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 = 'This is the content:<slot></slot>'

<head>
    <base href="https://rawgit.com/">
    
    <!--Array.from() polyfill for IE
    <script src="joshuacerbito/d6599f1c4a218e722a03514c3dbff1c2/raw/4c43e6346ca48d66344c9b35fe7381b883ec2b32/array_from_polyfill.js"></script>-->
  
    <!--Shadow DOM polyfill for Firefox and IE-->
    <script src="webcomponents/shadydom/master/shadydom.min.js"></script>

<body>
    <h4>Simple Shady</h4>
    <div id="RootDiv">
      <span>Content</span>
    </div>

【讨论】：

我之前使用this.createShadowRoot() 添加了shadow dom（这样我就可以在firefox 中使用shadow dom），但它似乎不适用于attachShadow( { mode: 'open' } )。 TypeError: this.attachShadow is not a function
@servinlp 如果加载 shadydom.min.js，则不应使用 webcomponents.js