Как получить доступ к ShadowDOM других полимерных элементов?

Question

Я изучаю Дарт, создавая простой webapp. приложение ui, которое я имею в виду, состоит из двух частей: одна панель управления, другая - рабочая область. нажав кнопки на панели управления, пользователь должен иметь возможность контролировать рабочее пространство.

как панель управления, так и рабочее пространство являются пользовательскими полимерными элементами. В классе дротика панели управления я могу получить доступ к ней с помощью shadowRoot.querySelector, но поскольку панели управления необходимо управлять рабочей областью, мне также нужно получить доступ к рабочему пространству. но я не знаю, как это сделать. Например, я попробовал querySelector, он дал мне null. Я понимаю, что это тень DOM в теге рабочей области, но как получить доступ к теневому DOM тэгов других тегов?

Я ничего не могу найти в Интернете, каждый пример и документ, похоже, используют shadowRoot только для доступа к элементам self.

Answer 1

Трудно получить доступ к теневому DOM другого элемента, и это по дизайну. Вместо того, чтобы ваши два пользовательских элемента были тесно связаны, лучшим подходом было бы использование событий или сигналов. Элемент панели управления должен вводить пользователя и запускать соответствующие события, используя удобный метод fire(), который он наследует от класса PolymerElement. Ваше приложение может ловить, а затем передавать эти события в ваш элемент рабочей области. Если это кажется чересчур обоюдным, вы можете использовать Polymer's <core-signals> element для передачи событий без взаимодействия с посредниками.

В качестве примера, внутри вашего элемента панели управления у вас может быть жирным шрифтом.

<button on-click="{{boldClicked}}">Bold</button>

Когда эта кнопка нажата, boldClicked() метод на панели управления выполняется в ответ. Это может выглядеть примерно так:

void boldClicked(Event event, var detail, Element target) { fire('core-signal', detail: {'name': 'bold', 'data': null}); }

Затем в файле HTML вашего рабочего пространства элемента, вы можете иметь:

<core-signals on-core-signal-bold="{{boldEventReceived}}"></core-signals>

И, наконец, в классе Dart вашего рабочего пространства элемента будет метод как так:

void boldEventReceived(Event event, var detail, Element sender) { // manipulate workspace shadow DOM here }

Это я это всего лишь один из нескольких способов достижения этого. Вы можете посмотреть <core-signals> example команды Дарта.

И, конечно, если вы полностью используете Polymer, вы обнаружите, что вам нужно очень мало ручных манипуляций с DOM. Использование привязки данных и представлений, управляемых данными, является выигрышной стратегией.

Answer 2

Вы можете использовать селектор, который прокалывает хотя все теневые границы querySelector('my-tag /deep/ some-element') или querySelector('* /deep/ some-element') или как селектор, который только прокалывает через один уровень теневой границы querySelector('my-tag::shadow some-element') или альтернативно месте оба элемента внутри <template> другого элемента Polymer, то вы можете соединить атрибуты из двух компонентов с одним и тем же полем на общем родительском элементе (это предпочтительный метод в Polymer.

Решение @ user3216897 прекрасно, особенно если элементы не имеют общего родителя.

Вместо shadowRoot.querySelector вы должны быть в состоянии использовать $['abc'], если элемент имеет id атрибут со значением 'abc'.