0

I'm learning Dart by making a simple webapp. the app ui I have in mind has two parts, one is a control panel, the other is a workspace. by clicking buttons in the control panel, user should be able to control the workspace.

both the control panel and the workspace are custom polymer elements. In the Control Panel's dart class, I can access itself by using shadowRoot.querySelector, but since the control panel needs to control the workspace, I need to access the workspace also. but I don't know how to do that. I tried querySelector for example, It gave me null. I understand it is a shadow DOM in the workspace tag, but how to access other tags' shadow DOM?

I can't find anything online, every example and document seems to only use shadowRoot to access self elements.

2

2 Answers 2

1

It is difficult to access the shadow DOM of another element, and this is by design. Instead of having your two custom elements so tightly coupled, a better approach would be to use events or signals. Your control panel element should take user input and fire appropriate events using the convenient fire() method it inherits from the PolymerElement class. Your application can catch and then relay those events to your workspace element. If that seems overly circuitous, you can use Polymer's <core-signals> element to pass events without dealing with intermediaries.

As an example, inside your control panel element, you might have a bold button.

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

When that button is clicked, the control panel's boldClicked() method is executed in response. It might look something like this:

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

Then in your workspace element's HTML file, you might have:

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

And finally, in your workspace element's Dart class would be a method like so:

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

This is just one of several ways to accomplish this. You can look over the Dart team's <core-signals> example for more.

And of course, if you're using Polymer to its full potential, you will find that you need to do very little manual DOM manipulation. Using data binding and data-driven views is a winning strategy.

1
1

You can either use a selector that pierces though all shadow boundaries querySelector('my-tag /deep/ some-element') or querySelector('* /deep/ some-element') or as selector that just pierces through one level of shadow boundary querySelector('my-tag::shadow some-element') or alternatively place both elements within the <template> of another Polymer element then you can connect attributes of both components with the same field on the common parent element (this is the preferred method in Polymer.

The solution of @user3216897 is fine of course especially if the elements don't share a common parent.

Instead of shadowRoot.querySelector you should be able to use $['abc'] if the element has an id attribute with the value 'abc'.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.