如何让 Web 组件插槽工作？

Question

我已经复制了 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>

如何让菜单中的第二个顶部栏显示 "Let's have some different text!"？

Answer 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

如何让 Web 组件插槽工作？

How do I get web component slots to work?

html

web-component

shadow-dom

custom-element