Полимер - Показать элемент внутри полимерного элемента

я начать играть с полимерными и я строю элемент с этой структурой:Полимер - Показать элемент внутри полимерного элемента

<link rel="import" href="../bower_components/polymer/polymer.html"> 

<polymer-element name="e-card" attributes="background" contructor="eCard" noscript> 

    <template> 

    <style> 

     h1 
     { 
     color: #123; 
     font-size: 3em; 
     text-align: center; 
     } 

     p 
     { 
     color: #333; 
     } 

    </style> 
    </template> 
</polymer-element>

В моей index.html файл я называю элемент, как это:

... 
<head> 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
    <link rel="import" href="elements/e-card.html"> 
</head> 
<body> 
    <e-card> 
    <h1>This is my card</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </e-card> 
</body> 
...

Но когда я открываю файл в браузере, ничего не отображается. Что я сделал не так?

источник

2015-01-07 João Paulo Saragossa

Похоже, у вас нет элементов HTML, определенных в вашей "электронной карте"? –

Используйте теги внутри шаблона. Это должно сделать ваше содержимое внутри полимерного элемента.

Чтобы узнать больше о том, как работают теги контента, обратитесь к https://www.polymer-project.org/platform/shadow-dom.html.

источник

2015-01-07 06:32:48 skmvasu

Спасибо! Помогает много –

Вы можете использовать тег, чтобы взять с собой, содержанием в тег

Источник: https://www.polymer-project.org/docs/start/tutorial/step-2.html

источник

2015-02-09 05:02:02

Добавьте содержание тег в элемент, а затем добавить некоторые стили для нужного элемента/тега.

**Example** 

<template> 
    <style> 
    <!-- add styling to the p tag. --> 
    polyfill-next-selector { content: ':host > p' }::content > p { 
     color: black; 
    } 
    <!-- add styling to all content. --> 
    polyfill-next-selector { content: ':host > *' }::content > * { 
     color: green; 
    } 
    </style> 
    <content></content> 
</template>

Надеюсь, что это помогло!

источник

2015-02-16 18:59:12

Способ, которым вы его настроили прямо сейчас, для отображения электронной карты нет ничего. Чтобы заставить шаблон отображать что-то, просто напишите обычный html внутри его корневого тега <template>.

Причина, по которой ваш шаблон не отображает h и p, заключается в том, что он не знает, как их отображать. Для этого используйте тег <content>.

index.html

<e-card> 
    <h1>This is my card</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
</e-card>

электронной card.html

... 
</style> 
<template> 
    <content select="h1"></content 
    <content select="p"></content> 
</template>

Это несколько похоже на то, как можно было бы дать функцию некоторые параметры. Здесь «функция» - это электронная карта, а «параметры» - h1 и p.

источник

2015-03-09 21:00:23 codebreaker

Это правильно, но вам НЕ НУЖНО указывать типы контента. Если вы просто хотите отобразить весь контент, вы просто используете – hobberwickey

Полимер - Показать элемент внутри полимерного элемента

ответ

Смежные вопросы