I created my dart web component that extends a DIV element.
In DART I can add a DIV element to the DOM with:
DivElement div = new DivElement();
document.body.elements.add(div);
Dart html api
Can I do the same thing with my web component?
What's the right syntax?
Web UI Specification has a section about web component instantiation:
http://www.dartlang.org/articles/dart-web-components/spec.html#instantiation
... call new FooComponent.forElement(elem) in Dart. We don’t recommend
using this approach because this constructor call cannot be used by
itself–it requires several set up steps. We might have runtime
libraries to make this easier in the future ...
Related
In AngularDart I used to extend ShadowRootAware and AttachAware to query the document with shadowRoot.querySelector(...).
Now it seems that those classes are gone. How can I query the DOM, and how do I execute some code in the "attach" phase?
I found
var shadowRoot = DOM.getShadowRoot(host);
shadowRoot should allow you to call querySelector()
Not tried myself yet though.
The following question asks "How to query the shadowDOM in an Angular component test", but I don't want to achieve this in a unit testing context, but the actual component.
Specifically, I have a component whose template contains a canvas that I would like a reference to.
You can extend ShadowRootAware and override onShadowRoot() to obtain a reference to ShadowRoot, which in turn can be used for querying. (using .querySelector)
I have a custom #NgComponent in my project and it works if I place it within the static HTML of the application. What I'm trying to figure out is how to add one to the DOM dynamically? If I construct an instance of my Component it does not appear to be of type Element and so it cannot be added directly to the children of an element in the DOM. Is there an alternate way to construct my component or wrap it for injection into the DOM?
e.g. I naively expected to be able to do something like:
dom.Element holderEl = dom.document.querySelector("#my-holder");
holderEl.children.add( new MyComponent() );
But I have also tried simply appending HTML containing my custom element to an element using innerHTML
holder.innerHtml="<my-component></my-component>"
and creating the element using document.createElement()
dom.Element el = dom.document.createElement("my-component");
dom.document.body.append(el);
But the component does not seem to be realized when added.
thanks,
Pat
You can add components dynamically, but you must manually invoke the Angular compiler so it notices that the innerHTML has a component embedded in it.
However, that is not the "Angular way".
Instead, write your template as
<div id="my-holder">
<my-component ng-if="should_component_be_displayed"></my-component>
</div>
Here, my-component will be created and included in the DOM only if should_component_be_displayed is true.
The my-holder div can be removed which leads to a cleaner DOM structure.
Is there a procedure to call an "init" method on a polymer element in Dart in order to populate it?
I have a polymer template (still not sure it's correct) and I want to populate it with the results of an HttpRequest. I can populate with a static list, but not sure how to populate it with a dynamic list made via an http call.
Are there examples anywhere?
I'm still trying to come up to speed on Dart and Polymer ...
My hacks are at https://gist.github.com/fils/6270699
Have you considered putting the init code inside a created() lifecycle method? You can see an example of that at https://github.com/dart-lang/web-ui/blob/polymer/example/todomvc/web/todo_row.dart
In (latest) Dart Web UI, what's the best way to process an element when it's added or removed from the DOM by a template? Ideally I'd like to register a callback right in the template, but that's not a requirement.
Background: I need to register/unregister certain DOM elements from two JS libraries (one of which is a JQuery plugin). Since my template uses loops and conditionals (and data binding), elements can come and go at any time, and I can't just register them after the initial rendering.
It is possible to add callbacks to your component's class that trigger when it is either created, inserted into the DOM, or removed from the DOM.
Web UI Specification: Lifecycle Methods
class MyComponent extends WebComponent {
inserted() {
// Do stuff when inserted into DOM.
}
removed() {
// Do stuff when removed from DOM.
}
}