Dart WebComponent是否可以訪問其DOM元素

在我的擴展WebComponent的類中，是否有一種標準方式來訪問表示此實例根目錄的DOM元素？Dart WebComponent是否可以訪問其DOM元素

2013-06-28 brooks94

是的，你可以使用getShadowRoot（）：

getShadowRoot('x-some-component').style.color = '#F00';

來源

2013-06-28 22:04:54

'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）。查詢將遍歷DOM並找到具有匹配ID /類的節點，而getShadowRoot（）會自動返回相應的節點。考慮一個點擊的組件，將其顏色改爲紅色。現在將這兩個組件添加到頁面中。使用查詢，無論您單擊第一個還是第二個組件，第一個組件都將始終更改顏色。使用getShadowRoot（），更改顏色的組件將成爲您單擊的組件。 –

有兩種方法。首先是使用_root。第二種選擇是使用Pixel Elephant提到的getShadowRoot()。

一些舊代碼依賴於_root，但不要使用它，因爲它已被棄用並且正在消失。在IDE中，getShadowRoot()也會更好地自動完成。

這是你應該做的：

getShadowRoot('x-your-element').classes.add('your-element');

來源

2013-06-29 11:08:43

請參閱Pixel Elephant的回答評論。 – brooks94

@ brooks94你不需要存儲任何東西。 'x-your-element'只是web組件的名稱，例如：''。 –

我不知道這是否是做到這一點的好辦法，
但我用這樣的：

inserted() { 
    var root = shadowRoot != null? shadowRoot: this; 
    var element = root.query("something in the webcomponent dom"); 
    element.text = "Hello from webcomponent"; 
}

此代碼符合影子和標準的方式。

來源

2013-07-05 09:48:50

Dart WebComponent是否可以訪問其DOM元素

回答

相關問題