Manual constructor of a polymer element does not properly initialize #12089
Comments
|
yeah, I don't think manual creation (as above) will work anymore. What we could do is make |
|
Sorry -- I should've been more clear. Creating an element in code will work, but you should not have to do all those crazy steps! No more .host =, .created, or whatever else :) Instead it will be just like in the Custom Elements spec: "new Element.tag" (document.createElement in JS), "new Element.html", "innerHtml = ", etc. |
|
https://codereview.chromium.org/20886002/ has some convenience methods for CustomElement (we'll need similar for PolymerElement) |
|
Not going to say no to an easier way to create a custom element :) I'd be very happy to say new Element.tag('fancy-button') Curious, would I be able to say new FancyButton() ? |
that is a question for Vijay and Stephen. Last I heard Dartium is getting really close. Not sure about dart2js side of things. cc @vsmenon. |
|
Ah, makes sense. Can vsm@ and sra@ paste in the issues for dartium and dart2js custom element support? My search didn't find them. Thanks! |
|
Bumping to High because I believe this will be fixed for 1.0 Removed Priority-Unassigned label. |
|
Friendly update. I just tried this again with Polymer 0.5.5 and it didn't work. I cleaned up the sample to simplify: cc @jmesserly. |
|
Added this to the M7 milestone. |
|
This comment was originally written by yuri...@gmail.com Just wanted to ask if there is any workaround for creating custom Polymer elements from Dart code? I'm migrating web_ui to Polymer and need some advice. Thank you! |
|
This comment was originally written by yu...@gmail.com I would be happy to go though all "those crazy steps" at least they worked in web-ui. In polymer nothing works :( |
|
Hi yuriry, try this: import 'package:custom_element/custom_element.dart'; That's all you should need to do now :) Added Fixed label. |
|
FYI: new Element('tag-name') is covered by: |
|
Awesome. Confirmed! |
|
This comment was originally written by yurir...@gmail.com Thanks a lot John, it works!!! |
|
This comment was originally written by yuriry...@gmail.com Not only dynamic element creation works, lifecycle methods on dynamically created elements also get called as expected. This is great, thank you again! |
sethladd
added
Type-Defect
P1
See also public thread: https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/zd_bPhIj6gI
This now works:
// Just creating an HTML tag and insert it into the page. Amazing!
container.children.add(new Element.html('<div is="my-element">'));
However, this is inserting a new <div> but is not activating the shadowDom of the element:
runAsync(() {
print('inside run async');
Element host = new Element.html('<div is="my-element">');
MyElement myElement = new MyElement()
..host = host
..created();
container.children.add(host);
myElement.inserted();
});
Previous examples showed an initShadow, but that function is now called by created(). Is there something else I need to call?
[after some research]
I set me some breakpoints, here's what I found:
For the case in runAsync (below), when the code gets to _initShadowRoot(), the _localNames list is empty, and thus nothing happens in _initShadowRoot.
Finding uses of _localNames, looks like only:
void registerPolymerElement(String localName, PolymerElement create()) {
registerCustomElement(localName, () => create().._initialize(localName));
}
is where _initialize is called (and thus, sets the localName)
So, I'm guessing we need to somehow move _initialize(localName) into created() (or some place a normal user can call for these cases when you're just constructing an element and trying to manually insert)
The text was updated successfully, but these errors were encountered: