聚合物 - 聚合物元素內顯示元素

我開始玩聚合物和我建立這個結構的元素：聚合物 - 聚合物元素內顯示元素

<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

你現在設置的方式，沒有任何電子卡可以顯示。爲了使模板顯示一些東西，只需在其根目錄<template>標籤內寫入通常的html即可。

您的模板不顯示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

聚合物 - 聚合物元素內顯示元素

回答

相關問題