I didnt find anything how to select just Text for the Insertion Point of the Shadow DOM.
something like:
<content select="text"></content>
Is there a selector for this?
According to spec:
The matching criteria for an insertion point is a set of compound
selectors [SELECTORS4]. These compound selectors are restricted to
contain only these simple selectors:
A type selector or a universal selector
class selector(s)
An ID selector
attribute selector(s)
A negation pseudo-class, :not()
http://www.w3.org/TR/shadow-dom/#satisfying-matching-criteria
There is no text selector.
Related
I am trying to pass an object reference to the Dart script associated with a Polymer element. I have found the element in the DOM but I can't figure out how to call a method in the Dart associated with the element or any other way to dynamically pass an object to the Polymer element to be displayed.
Basically you just get a reference by using for example querySelector('#someid') and just assign the value to a field or setter or call a method and pass it as an argument.
querySelector('#someid').someField = someValue;
querySelector('#someid').setValue(someValue);
This might produce a hint in DartEditor but should still work when the code is executed. To get rid of the hint you can "cast" like
(querySelector('#someid') as MyComponent).someField = someValue;
querySelector('#someid') as MyComponent).setValue(someValue);
You need to import MyComponent to make this work.
If this doesn't something with your code might be wrong. For example the main() method if you have one. See how to implement a main function in polymer apps for more details.
If nothing of the above works, please add code to your question that shows what you're trying to accomplish.
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.
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.
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'.
Is there a substitute for querySelectorAll in Polymer?
I like to do many stuff programmatically and for single elements I use:
ButtonElement b2 = $["b2"];
But if I want to get several radiobuttons, I can't use the usual
List<InputElement> radios = querySelectorAll("[name='func']");
radios.forEach((f) {
f.onClick.listen((e) => changeFunction(f,e));
});
Should I be doing it in a different way?
ShadowRoot (which extends DocumentFragment), and Element both have querySelector and querySelectorAll that are scoped properly.
For a custom element, which you use depends on whether you want to query the light or shadow DOM, but since you are using $[], you probably want to use the shadow root.
Try this:
List<InputElement> radios = shadowRoot.querySelectorAll("[name='func']");
I'm working on a class similar to UIControl and I would replicate some of its behaviours.
I wonder how Apple has implemented the UIControl structure that stores the relations between actions, targets and UIControlEvents.
Looking at the UIControl class I saw that UIControlEvents (documentation) defines a list of options that we can use to create a bit mask.
In my opinion there is something like a dictionary that uses as keys the event type and stores structure with the target and selector as value.
I can create something similar and probably it works :P but I'd like to have your opinions to
be sure to move head straight for the right direction.
For example... the first big doubt that I have is how can I convert a UIControlEvent type into a valid key for a dictionary? (or any other structure if you think that the dictionary is not the solution) have I to convert it to an NSString??? It seems a buggy solution.
Using Polymer Dart I often need to get hold of the Polymer-Element object behind one of the child elements.
ButtonElement nextButton;
void inserted()
{
//Get hold of the elements
nextButton = shadowRoot.query('#nextButton');
//Do some thing useful with nextButton
}
<template if="{{emailValid}}">
<button id="nextButton" on-click="nextStep">
</template>
This works fine. However if in this case nextButton is underneath a conditional template its not part of the DOM when inserted() is called and is therefore not found. Is there anyway other way to get hold of it?
Otherwise I will have to some how determine when that conditional template is displayed and grab it then.
This might depend on what exactly "Do something useful with nextButton" means, but the Polymer-ic way to accomplish this is generally to encapsulate any reusable behavior together with the DOM it operates on. That is, instead of including code to operate on #nextButton in the enclosing element's inserted method, create a new custom element, let's call it super-button, and put the relevant code in super-button's ready or inserted method.
Then, if you find some behavior that really should be outside of super-button, follow the same pattern as the on-click handler you use above. Have super-button fire a custom event at the appropriate time and then declaratively map a handler to that event:
<template if="{{emailValid}}">
<super-button on-click="nextStep" on-my-special-event="mySpecialEventHandler"></super-button>
</template>