폴리머 - 폴리머 요소 내부에 표시 요소

나는 폴리머으로 경기 시작 그리고 난이 구조와 요소 건물입니다 :폴리머 - 폴리머 요소 내부에 표시 요소

내 index.html 파일에서

<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>

이 같은 요소를 호출

... 
<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을 참조하십시오. https://www.polymer-project.org/docs/start/tutorial/step-2.html

출처

2015-01-07 06:32:48 skmvasu

감사합니다. 많은 도움이 됨 –

당신은

소스 태그로의 내용을 가지고 태그를 사용할 수 있습니다.

**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-09 05:02:02

다음 원하는 요소/태그에 대한 몇 가지 스타일을 추가, 당신의 요소에 내용 태그를 추가

출처

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

폴리머 - 폴리머 요소 내부에 표시 요소

답변

관련 문제