어떻게 내가 shadowRoot에 액세스 할 수 있도록 shadow dom으로 폴리머 맞춤 요소를 만들 수 있습니까?

나는 고분자 프로젝트를 스캐 폴딩하는 (버전 0.16.0) 고분자 CLI를 사용 있지만 콘솔을 사용하여 그림자 루트에 액세스 할 수 없습니다 : 그림자 DOM이 폐쇄 모드에 마치도록어떻게 내가 shadowRoot에 액세스 할 수 있도록 shadow dom으로 폴리머 맞춤 요소를 만들 수 있습니까?

var element = document.getElementsByTagName("my-app")[0].shadowRoot 반환 정의되지 않은.

사용자 정의 요소가 외부에서 shadowRoot에 액세스 할 수 있도록 열린 모드를 사용하도록하려면 어떻게해야합니까?

편집 2 :

참고로 : 여기에 주요 질문은 그래서 약간은

편집 그림자 DOM 모드와 관련되지 않을 수있는 질문을 변경 한 shadowRoot에 액세스하기 위해 수행해야 할 것입니다 https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#advanced 고급 주제 섹션에 근접 모드

단계 재현하는 시나리오 :

npm install -g polymer-cli 
mkdir my-app 
cd my-app 
polymer init starter-kit 
polymer serve --open

개 일부 코드 조각 :

index.html을 :

내-app.html :

... 
<dom-module id="my-app"> 

<template> 
... 
</template> 

    <script> 

    Polymer({ 

     is: 'my-app', 

     properties: { 

     page: { 
      type: String, 
      reflectToAttribute: true, 
      observer: '_pageChanged' 
     } 

     }, 

     observers: [ 
     '_routePageChanged(routeData.page)' 
     ], 

     _routePageChanged: function(page) { 
     this.page = page || 'view1'; 
     }, 

     _pageChanged: function(page) { 
     // Load page import on demand. Show 404 page if fails 
     var resolvedPageUrl = this.resolveUrl('my-' + page + '.html'); 
     this.importHref(resolvedPageUrl, null, this._showPage404, true); 
     }, 

     _showPage404: function() { 
     this.page = 'view404'; 
     } 

    }); 

    </script> 

</dom-module>

출처

2016-10-02 Marcos Macedo

당신은 몇 가지 코드 – a1626

개방 및 폐쇄 모드는 무엇을 추가 할 수 있습니까? –

Firefox에서 그림자 DOM을 폴리올로 채우려면 그림자 DOM 폴리필을 포함하지 않는 webcomponents-lite.js 대신 webcomponents.js를 다운로드해야합니다. – Supersharp

당신이 그늘 DOM (기본값)를 사용하는 경우 다음 더 shadowRoot이 없습니다.

그림자 DOM을 활성화하는 방법은 https://www.polymer-project.org/1.0/docs/devguide/settings을 참조하십시오. 이 같은

뭔가 자세한 내용은 https://www.polymer-project.org/1.0/docs/devguide/local-dom

출처

2016-10-02 12:01:11

dom 설정을 포함하도록 수정 : "그림자"로 정의됩니다. 'var 요소 = Polymer.dom (document.getElementsByTagName ("my-app") [0]). 루트도 콘솔에서 undefined를 반환합니다. –

그림자 DOM을 활성화하면'Polymer.dom (...)'. 'document.getElementsByTagName ("my-app") [0]'은 무엇을 반환합니까? –

'document.getElementsByTagName ("my-app") [0]은 .root 또는 .shadowRoot 또는 반환하는 Polymer.dom을 사용하여 '을 반환합니다. 정의되지 않음 –

실제로 작동합니다 참조하십시오

var element = Polymer.dom(document.getElementsByTagName("my-app")[0]).root

을 작동합니다. 아래 스 니펫을 참조하십시오.

아마도 올바른 위치에 { dom: 'shadow' } 설정을 추가하지 않았을 것입니다. <link> ~ polymer.html 앞에 정의해야합니다.

output.textContent = document.querySelector('my-app').shadowRoot

<head> 
 
    <script> 
 
    window.Polymer = { 
 
     dom: 'shadow', 
 
     lazyRegister: true 
 
    } 
 
    </script> 
 
    <link rel=import href="https://rawgit.com/polymer/polymer/master/polymer.html"> 
 
</head> 
 

 
<body> 
 
    <dom-module id="my-app"> 
 
    <template> 
 
     Hello 
 
    </template> 
 
    <script> 
 
     Polymer({ 
 
     is: 'my-app' 
 
     }) 
 
    </script> 
 
    </dom-module> 
 
    <my-app></my-app> 
 
    <div id=output></div> 
 
</body>

출처

2016-10-06 14:56:24 Supersharp

나는 코드를 편집하지 않았다. 질문에서 시나리오 * 섹션을 재현하기 위해 * 단계에서 스캐 폴딩된다. 그리고 테스트는 브라우저 콘솔에서 실행됩니다. 실행해야하지만 실행하지 않아도됩니다. –

그러면 문제가 귀하의 잘못이 아니라고 생각하면 편집자 사이트에서 문제를 열어야합니다 – Supersharp

어떻게 내가 shadowRoot에 액세스 할 수 있도록 shadow dom으로 폴리머 맞춤 요소를 만들 수 있습니까?

답변

관련 문제