2
WebComponent를 확장하는 클래스 내에서이 인스턴스의 루트를 나타내는 DOM 요소에 액세스하는 표준 방법이 있습니까?다트 WebComponent가 DOM 요소에 액세스 할 수 있습니까
A
답변
2
예, getShadowRoot()를 사용할 수 있습니다
getShadowRoot('x-some-component').style.color = '#F00';
2
두 가지 방법이 있습니다. 먼저 _root을 사용합니다. 두 번째 옵션은 Pixel Elephant에서 언급 한대로 getShadowRoot()을 사용하는 것입니다.
일부 오래된 코드는 대체로 _root에 의존하지만 더 이상 사용되지 않으며 없어지므로 사용하지 마십시오. getShadowRoot()은 IDE의 자동 완성에 더 좋습니다.
이
당신이해야 할 일이다 는이 작업을 수행 할 수있는 좋은 방법인지 모르겠어요getShadowRoot('x-your-element').classes.add('your-element');
+0
Pixel Elephant의 답변에 대한 의견을 참조하십시오. – brooks94
+0
@ brooks94 아무 것도 저장할 필요가 없습니다. 'x-your-element'는 단순히 웹 구성 요소의 이름입니다. 예 :'
0
,
을하지만이 같은 사용
inserted() {
var root = shadowRoot != null? shadowRoot: this;
var element = root.query("something in the webcomponent dom");
element.text = "Hello from webcomponent";
}
이 코드를 그림자 돔 및 표준 방식 모두를 준수합니다.
'x-some-component'는 HTML 요소의 ID입니까? 쿼리 ('x-some-component')와 다른 점은 무엇입니까? 그 ID를 어딘가에 저장해야한다는 뜻은 아니겠습니까? – brooks94
아니요, x-some-component는 요소 이름입니다 ([WebUI 예제] (http://www.dartlang.org/articles/web-ui/#components)의 x-click-counter). Query는 DOM을 탐색하고 ID/클래스가 일치하는 노드를 찾으며 getShadowRoot()는 자동으로 해당 노드를 반환합니다. 클릭하면 색상이 빨간색으로 변하는 구성 요소를 생각해보십시오. 이제이 구성 요소 중 두 개를 페이지에 추가하십시오. 쿼리를 사용하면 첫 번째 구성 요소를 클릭하든 두 번째 구성 요소를 클릭하든 첫 번째 구성 요소의 색이 항상 변경됩니다. getShadowRoot()를 사용하면 색상을 변경하는 구성 요소가 사용자가 클릭 한 구성 요소가됩니다. –