중첩 된 폴리머 구성 요소 내용 문제

foo.html을 :중첩 된 폴리머 구성 요소 내용 문제

<link rel="import" href="bar.html"> 
<dom-module id="p-foo"> 
    <template> 
     <p-bar> 
      <content select=".myContent"></content> 
     </p-bar> 
    </template> 
    <script> 
     Polymer({ 
      is: 'p-foo', 
     }) 
    </script> 
</dom-module>

bar.html에는 :

<dom-module id="p-bar"> 
    <template> 
     bar open 
     <content select=".myContent"></content> 
     bar closed 
    </template> 
    <script> 
     Polymer({ 
      is: 'p-bar', 
     }) 
    </script> 
</dom-module>

demo.html :

<!DOCTYPE html> 
<html> 
    <head>  
     ... 
     <link rel="import" href="foo.html"> 
    </head> 
    <body> 
     <p-foo><div class="myContent"><strong>hello</strong></div></p-foo> 
    </body> 
</html>

예상 출력 :

bar open 
hello 
bar closed

(210)

가끔 무엇을 얻을 :

이

bar open 
bar closed 
hello

내가 점점 오전 오류가 100 % 재현 할 수 없습니다. 페이지를 새로 고치는 시간의 비율 만 발생합니다. 또한 내용이 복잡할수록 오류 발생 확률이 높아지는 것으로 나타났습니다.

bar 구성 요소가 완전히 렌더링되기 전에 폴리머가 .myContent을 선택하려고합니다.

출처

2016-09-13 user1325159

위에 붙여 예에서 일부 오류가 발생했습니다. content 태그에'selector '를 사용했기 때문에 요소가'foo'와'bar' (하이픈'-'이 누락 됨)로 명명 될 수 없다는 사실을 무시하면'bar open'과'bar closed'가 출력됩니다. 한 번도 할 수 없었던 문제를 재현 할 수있는 좀 더 관련있는 예를 제공해 주시겠습니까? – a1626

@ a1626 당신은'bar open'과'bar closed'가'' –

@TomaszPluskiewicz yes에 배포되지 않기 때문에 인쇄되지 않을 것이라고 생각합니다. 현재 코드를 사용하면'content' 태그는'myContent' 클래스를 가진 객체만을 찾고 렌더링합니다. 그 외의 것은 무시합니다. – a1626

Polymer()으로 전화하여 새 사용자 정의 요소를 등록해야합니다.
또한 주석에 이미 언급 한 것처럼 사용자 정의 요소에는 하이픈이 있어야합니다. 예 : <p-foo> 및 <p-bar>.

foo.html을 :

<link rel="import" href="bar.html"> 
<dom-module id="p-foo"> 
    <template> 
     <p-bar> 
      <content select=".myContent"></content> 
     </p-bar> 
    </template> 
    <script> 
     Polymer({ 
      is: 'p-foo', 
     }) 
    </script> 
</dom-module>

bar.html에는 :

<dom-module id="p-bar"> 
    <template> 
     bar open 
     <content select=".myContent"></content> 
     bar closed 
    </template> 
    <script> 
     Polymer({ 
      is: 'p-bar', 
     }) 
    </script> 
</dom-module>

demo.html :

<head>  
     ... 
     <link rel="import" href="foo.html"> 
    </head> 
    <body> 
     <p-foo><div class="myContent"><strong>hello</strong></div></p-foo> 
    </body> 
</html>

출처

2016-09-14 07:07:07 Supersharp

사과,하지만 그 예제에서는 그냥 지나쳤지만 여전히 버그가 발생합니다. 내가 많은 더 많은 콘텐츠 선택자를 만들고 그 중에서 콘텐츠를 더 복잡하게 만들면 (예 : 요소 등) 새로 고침시 오류를 재현 할 가능성이 크게 높아집니다. Polymer가 컨텐트를 선택하기 전에 페이지가 완전히 렌더링되면 해당 컨텐트의 모든 요소가 요소의 맨 아래로 던져지는 일종의 경쟁 조건 인 것으로 보입니다. – user1325159

위 예제는 완벽하게 작동하며 경쟁 조건에 대한 질문이 아닙니다. 적어도 Chrome에서 효과가 있습니까? 버그를 재현 할 수있는 충분한 정보를 제공 할 수 있습니까?내가 말했듯이 – Supersharp

은 그 시간의 아주 작은 부분을 망친다. 예제를 더 복잡하게 만들면 (더 많은 html 추가) 오류를 재현 할 기회가 훨씬 더 커집니다. 만약 당신이 그것을 매우 복잡하게 만들면, 1/4 리프레시가 버그를 재생산하는 것과 같다고 생각합니다. – user1325159

중첩 된 폴리머 구성 요소 내용 문제

답변

관련 문제