numtel / meteor-webcomponent

WebComponent integration for Meteor templates
MIT License
37 stars 1 forks source link

Polymer #2

Open ccorcos opened 9 years ago

ccorcos commented 9 years ago

Hey, I'm not too familiar with web components so I'm just curious how you see this being used in a larger context -- not just a simple counter. Maybe in the context of Telescope?

Also have you seen Polymer? Seems similar and pretty cool as well...

numtel commented 9 years ago

This package was conceived to address issues with the Velocity HTML reporter having styles bleed from the page into the reporter. This has not been implemented yet but expect it soon.

Polymer and, the library used in this package, X-Tags use the same underlying code for bringing WebComponents to browsers that don't support them natively. X-Tags was chosen over Polymer due to the fact that its interface allows for Meteor templates to be used as WebComponents without modification.

See my comparison of CSS isolation techniques: http://css-isolation.meteor.com/

numtel commented 9 years ago

Now that I've learned more about Polymer and x-tags, I have decided to restructure the library to use polymer's webcomponents.js for greater polyfill support. Please see the changes for version 0.0.3. I hope this does not cause any inconvenience.

ccorcos commented 9 years ago

Whoa :+1:

This looks good. Have you tried adding the Material Design components?

https://github.com/polymer/core-elements https://www.polymer-project.org/components/core-elements/demo.html

I'm also curious about some of the implementation details here. If I create a web component and insert it elsewhere, are the Template.rendered callbacks firing?

I'd be very interested if I could implement my swipe package as a web component:

https://github.com/ccorcos/meteor-swipe

numtel commented 9 years ago

Thank you

There's another package that implements polymer (and yet another for the core-elements): https://atmospherejs.com/ecwyne/polymer

Have you used either of those? I have not used any of the polymer specific features yet.

You should see Template.rendered callbacks firing when the element is created as well as when an attribute changes on the element. I'd be interested in hearing other ways to implement this but as far as I can tell, in order to update the data in the template when an attribute changes, I must remove the Blaze view and render a new one: https://github.com/numtel/meteor-webcomponent/blob/master/lib/registerElement.coffee#L34-35

emmanuelbuah commented 9 years ago

This is very interest. I currently use polymer + blaze @ www.huqoo.com. I treat polymer component as "just another html control" and it works great but it will be awesome if blaze templates can also render as components. The key, apart from css encapsulation, is event handling. Can can we fire/listen to event on a blaze web component?

emmanuelbuah commented 9 years ago

Note, polymer webcomponentjs is now at 0.6.

numtel commented 9 years ago

@emmanuelbuah Event handling on the custom element is a feature that I looked at implementing but it was not exactly straightforward to get it to work. As of right now, you may only use event handlers on elements that are children of the custom element. I welcome a pull request if you're very interested in that feature.

Thanks for the note on the version, I have released version 0.0.6 of this package which updates webcomponents.js to 0.6.0. This should be a major improvement for loading performance, the file size shrank from 220kb to 110kb :+1:

emmanuelbuah commented 9 years ago

@numtel Cool. I will look into it per https://github.com/peerlibrary/meteor-blaze-components/issues/14#issuecomment-91075588. I will send you a pull request when I have it all figured out. My guess is, it shouldn't matter if its a child element or not, since events propagate to the root and back down. So far as its on handled & cancelled, it should be fine. I will keep you posted.