有没有办法让 shadow dom 的 <slot> Firefox 中的元素工作？
作为解决方法，我目前正在从一个带有 for loop 的对象中添加我的所有内容。和 .innerHTML (见下文)但这是一个相当丑陋的方法。
webcomponents.js 作为第一个脚本标签添加到 head 中
html
<portfolio-container></portfolio-container>
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>";
}
最佳答案
您可以使用库来填充名为 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>关于javascript - Firefox 中的 shadow dom <slot> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41568784/