Vue.js and Web Components

[AlessandroEmm]

Hey there

I've been trying to to get vue.js running with a custom Element (Web Component) and I cant seem to get it running. I tried to hand it a { el: 'template', data: { test:" test"}} but it did not work (no errors).

Where as the template consists of

         <template>
         <h1> {{ test }}</h1>
          </template>

While the template can be resolved by vue the problem is that template is no ordinary HTML element and doesn't have the H1 as direct child. It has however a document fragment as an attribute which itself has the children in it. Passing vue this fragment didnt work either unfortunately. A document fragment is obviously not the same as full blown element so could that be the issue?

Thank you!
Alessandro

[AlessandroEmm]

I was able to get around the issue by boxing everything in the template tag into a div and referencing that. Is there a easy way to found out what the template aka documentfragment has been lacking that it wouldn't work with it?

Thanks again.
Alessandro

[yyx990803]

You should use the template tag with the template option instead of el.

e.g.

<template id="my-template">
    <h1> {{ test }}</h1>
</template>

new Vue({
    template: '#my-template',
    // ...
})

[AlessandroEmm]

Unfortunately that didn't work. What DOM Node would vue be doing the ID Lookup based on anyway? Can I use template and pass it the actuall innerHTML that its supposed to parse?

Thanks!

[yyx990803]

The catch here is template is used to created a cached DocumentFragment for reuse, while el is the actual element that Vue will use to render stuff. On the other hand, <template> tags cannot be used as a render node (because browsers won't render it at all, it only parses its content as a DocumentFragment). You need both template and el options for it to work.

Working example: http://jsfiddle.net/fNY6J/

[AlessandroEmm]

My configuration now is like
{ el: 'div', template: this.shadowRoot, data: {test:"input"}} // this.shadowRoot pointing to the template

And I'm getting a:

[AlessandroEmm]

So as an alternative i tried to modify the div lookup slightly by doing a
{ el: this.shadowRoot.querySelector('div'), template: this.shadowRoot, data: {input:"input"}}

I got a:
Uncaught DataCloneError: Failed to execute 'cloneNode' on 'ShadowRoot': ShadowRoot nodes are not clonable.

So thats probably where the evil lies.

[yyx990803]

Why would you use a shadowRoot as your template? Can you post a fiddle so I can see your setup?

[AlessandroEmm]

I'm not quite sure how to implement that with a fiddle to be honest otherwise I would have done that in the first place. :-) I'm going to give it a try.

My template is getting shadowRooted so that its content can be encapsulated/hidden from the rest of the DOM. Have you ever had a look at Polymer? (polymer-project.org) They have similar two-way binding functionality with shadowRoot in place. Thing is that I wanted something similar with regular web components. That's why I was on the look for an "independent" solution like yours.

[AlessandroEmm]

Sorry to bring up another point: Is it possible to invert the relationship from data to the vue instance? So that I can hand vue a reference to an object, but they would only get reference and watched when they are being used in a directive/bind?

[yyx990803]

Do you mean only watch data that is actually used in templates?

[AlessandroEmm]

Exactly.

[yyx990803]

Unfortunately that's not possible at the moment...

[AlessandroEmm]

Okay. Is it a limitation of the current implementation or hasn't it just come up as an requirement?

[yyx990803]

The idea is that if something is in vm.$data, it is meant to be observed. However you can simply do vm.someThing = {} after the vm has been created, these late additions will never get watched.

[AlessandroEmm]

I see your point. Thing is my $data is pointing to fairly large object that not only holds simple object like Arrays, String and the like but also DOM elements, well stuff that should most likely not be watched but should reside in the same object for convenience. Would it be a big effort to adapt that or rather make that configurable?