Question

给出以下html模板：

<div class="Page">
    Hello <slot name="personName"></slot>. Your name is <slot name="personName"></slot>.
</div>

如何使用自定义元素用一个值填充两个插槽（如果有的话）？

以下演示代码将产生：

Hello Bob，你的名字是。

这是打算吗？这是在模板的多个位置显示单个值的错误方法吗？

let tmpl = document.createElement("template");
tmpl.innerHTML = `
  <div>
    Hello <slot name="personName"></slot>. Your name is <slot name="personName"></slot>.
  </div>
`;

class MyElement extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.appendChild(tmpl.content.cloneNode(true));
  }
}

customElements.define("x-myelement", MyElement);

<x-myelement>
  <span slot="personName">Bob</span>
</x-myelement>

Answer 1

这是正常行为。

如果要多次重用变量，一个好的解决方案是将template literals与占位符一起使用。

在模板文字字符串中（即使用反尾标记分隔的字符串），占位符将替换为匹配变量的值。

                         path
0   rome is in province lazio
1  rome is in province naples
2                           N

您可以使用let name = "Bob" let template = `Hello ${name}. Your name is ${name}` // template will contain "Hello Bob. Your name is Bob"属性上的querySelector()或您喜欢的任何其他属性来获取轻型DOM的内容。要获取该值，请使用属性slot，textContent，甚至是innerHTML，如果您想保留周围的outerHTML元素。

＆＃13;

<span>

＆＃13;

class MyElement extends HTMLElement {
    connectedCallback() {
        var person_name = this.querySelector( '[slot=personName]' ).outerHTML
        this.attachShadow({ mode: "open" })
            .innerHTML = `Hello ${person_name}. Your name is ${person_name}`
    }
}

customElements.define("x-myelement", MyElement)

＆＃13;

Answer 2

查看LitHtml和MDN

将name作为元素的属性，然后将其注入模板。

const tmpl = document.createElement('template');
tmpl.innerHTML = `
<style>span{font-weight:bold}</style>
<p>Hello <span id="name"></span> Your name is <span id="name2"></span></p>`;
class MyElement extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    shadow.appendChild(tmpl.content.cloneNode(true));

    const name = this.getAttribute('personName');
    shadow.querySelector('#name').innerText = name;
    shadow.querySelector('#name2').innerText = name;
  }
}
customElements.define("x-myelement", MyElement);

<x-myelement personName="Bob"></x-myelement>

所有浏览器都不支持

插槽，尤其是命名插槽。

第二，开槽内容不在组件范围内（阴影dom），除非你想要的是什么？

填充多个命名空格的Web组件模板

2 个答案: