聚合物模块中有多个插入点？

Question

在 polymer 中，我们可以像这样在自定义模块中使用 <content> 为 HTML 内容创建插入点。

<my-custom-element>
  Surrounding HTML ...
  <content></content>
  Surrounding HTML ...
</my-custom-element>

然后像这样使用模块：

<my-custom-element>foo content</my-custom-element>

自定义元素能否支持多个这些基于 <content> 的插入点？又如何？

Answer 1

您可以使用标准从 <template> 中选择元素，使用带有 CSS 的 <content> 的 select 属性选择器以获取不同的插入元素。

<template>
  Name : <content select="h2"></content><br>
  Mail : <content select="#mail"></content>
</tempalte>

<my-custom-element>
    <h2>Some One</h2>
    <span id="mail">email@internet.com</span>
</my-custom-element>

聚合物模块中有多个插入点？

Multiple insertion points in polymer module?

polymer

web-component

shadow-dom

custom-element

html5-template