1

给定以下 html 模板：

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

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

下面的演示代码将产生：

你好，鲍勃，你的名字是。

这是故意的吗？这是在模板的多个位置显示单个值的错误方式吗？

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>

4

2 回答 2

2

这是正常的行为。

如果您想多次重用一个变量，一个好的解决方案是使用带有占位符的模板文字。

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

let name = "Bob"
let template = `Hello ${name}. Your name is ${name}`
// template will contain "Hello Bob. Your name is Bob"

querySelector()您可以使用slot属性或您喜欢的任何其他属性来获取轻量级 DOM 的内容。要获取值，请使用 property textContent, innerHTML，或者即使outerHTML您想保留周围的<span>元素。

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)
<x-myelement>
    <span slot="personName">Bob</span>
</x-myelement>

于 2018-06-18T15:06:31.140 回答
0

看看LitHtml和MDN

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

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>

并非所有浏览器都支持插槽，尤其是命名插槽。

其次，开槽的内容不在组件（shadow dom）的范围内，除非那是你要去的地方？

于 2018-06-15T20:55:45.723 回答