Несколько точек вставки в полимерный модуль?

В полимере мы можем создавать точки вставки для содержимого HTML с помощью <content> в настраиваемых модулях, подобных этому.

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

а затем позже используйте модуль следующим образом:

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

Может ли пользовательский элемент поддерживать несколько таких точек вставки на основе <content>? И как?


web-component custom-element polymer shadow-dom html5-template
person dangerChihuahua007    schedule 26.10.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать стандартный выбор элементов из <template>, используя атрибут select <content> с селектором CSS, чтобы получить разные вставленные элементы.

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

<my-custom-element>
    <h2>Some One</h2>
    <span id="mail">[email protected]</span>
</my-custom-element>
person Supersharp    schedule 26.10.2016
comment
Осторожно: в Polymer 2.0 <content> будет изменено на <slot>, поведение останется прежним. polymer-project.org/2.0/docs/about_20#shadow- дом-v1 - person LeBird; 27.10.2016
comment
@LeBird, вы правы, элемент ‹content› устарел и в спецификациях WhatWg/W3C. - person Supersharp; 27.10.2016