如何让 Web 组件插槽工作？答案

【问题标题】：How do I get web component slots to work?如何让 Web 组件插槽工作？
【发布时间】：2018-07-24 09:41:50
【问题描述】：

我已经复制了 MDN 的示例 (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)，但无法正常工作这是我的组件：

<link rel="import" href="../molecules/main-menu__topbar.html">


<template id="main-menu">
  <p>I'M THE MENU ELEMENT</span>
  <main-menu__topbar></main-menu__topbar>
  <main-menu__topbar>
    <span slot="my-text">Let's have some different text!</span>
  </main-menu__topbar>

</template>

<script>
  (function() {
    var importDoc = document.currentScript.ownerDocument;

    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {

      var template = importDoc.querySelector('#main-menu');

      var clone = document.importNode(template.content, true);

      var root = this.createShadowRoot();
      root.appendChild(clone);
    };

    document.registerElement('main-menu', {prototype: proto});
  })();
</script>

和导入的顶栏：

<template id="main-menu__topbar">
  <div class="main-menu__topbar">
    <p>I'm the topbar</p>
    <p><slot name="my-text">My default text</slot></p>
  </div>
</template>

<script>
  (function() {
    var importDoc = document.currentScript.ownerDocument;

    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {

      var template = importDoc.querySelector('#main-menu__topbar');

      var clone = document.importNode(template.content, true);

      var root = this.createShadowRoot();
      root.appendChild(clone);
    };

    document.registerElement('main-menu__topbar', {prototype: proto});
  })();
</script>

如何让菜单中的第二个顶部栏显示“让我们有一些不同的文本！”？

【问题讨论】：

标签： html web-component shadow-dom custom-element

【解决方案1】：

createShadowRoot() 与 Shadow DOM v0 相关，它不适用于 <slot> 元素，但仅适用于 <content> 元素。

<slot> 与 Shadow DOM v1 相关，它不适用于 createShadowRoot()，但仅适用于 attachShadow()。

由于不推荐使用 Shadow DOM v0，我建议使用 v1，因此替换 createShadowRoot：

 var root = this.attachShadow( { mode: 'open' } )

注意：您还应该使用自定义元素 v1 而不是 v0

【讨论】：