외부 웹 컴포넌트의 로컬 DOM에 접근하여 그 값을 자식으로 설정하십시오.

Question

중합체을 사용하여 개발되었으며 JavaScript를 사용하여 엔드 투 엔드 테스트를 구현하려는 웹 앱이 있습니다. 내가 프로그래밍 어떤 값을 설정하려고하는 이유입니다,하지만 난 중 한 가지 방법으로 요소의 로컬 DOM에 액세스 할 수 없습니다 해요 :

document.getElementById('nativeInput'); 
document.querySelector('#nativeInput'); 

사람이 직접 그림자 루트 요소에 액세스하고 설정할 수 없습니다 말해 줬어 그 (것)들에 가치. 그래서 기본적인 질문입니다 : 어떻게 요소의 그림자 DOM에 액세스하고 자녀에게 어떤 가치를 부여 할 수 있습니까? 가능한지 여부를 알려주세요. 그렇다면 해결책을 공유하십시오.

# shadow-root (open)에 내 JavaScript 선택 도구를 사용하여 HTML 요소에서 수행하려는 작업을 명확하게 이해하려면 스크린 샷을 참조하십시오. 이 open mode에서 생성 된 이후

Answer 1

당신은 node.shadowRoot 통해 액세스 할 수 있어야합니다. 즉, 그림자 요소는 집계 요소의 내부 구조를 분리하기 위해 존재하므로 먼저 iron-input 맞춤 요소에 값을 설정할 수있는 공용 API가 있는지 확인해야합니다.

Answer 2

End-to-End 테스트에 대해 언급 했으므로 Polymer가 그 목적으로 own, separate tool kit을 제공하고 있음을 지적하고자합니다.

최종 기술/테스트 프레임 워크에 관계없이 정확한 문제를 해결하기 때문에 paper-input's tests, 구현을 살펴보십시오. 구성 요소주기와 같은 개념을 이해하면이 여기 필수적 일 수 있습니다.

Answer 3

폴리머 요소 외부에서 자바 스크립트로 값을 보내려면 폴리머에 값을 바인딩하는 것처럼 루트 수준에서 추가 할 수 있습니다. 같은 Sometine :

index.html을

<dom-bind> 
<template> 
    <my-app my-prop = "{{myProp}}" ></my-app> 
</template> 
</dom-bind> 
<script> 
    var bindVal = document.querySelector('dom-bind'); 
    bindVal.myProp = "Test" 
</script> 

그렇게 <my-app> 요소에, 당신은 "테스트"값을 가진 myProp 속성이 있습니다.