Native and Polyfilled ShadowDOM

[amrut...@gmail.com]

Hello,

I am working on a project in which I am supposed to construct a graph with several nodes and edges using Polymer and Platform. I am using an underlying library which is developed in-house by my company which is not based on Polymer. This library contains functions for creating nodes, initializing graph etc.I have created a custom element called graph. Following is the declaration of this element:

<pre>

<polymer-element name="cmp-graph" attributes="canvas" constructor="CMPGraph">

<template>

          <div id="graph_win_placeholder">

            <div id="graph_win" class="canvas">

                <div id="graph_canvas" class="graph-area">

                </div>

            </div>            

          </div>

</template>

</polymer-element>

</pre> 

In Javascript I call a function of the library to initialize the graph. This function call needs a handle to the canvas div (the div with id="graph_canvas"). So I pass this.$.graph_canvas as a parameter while making the function call. But the library throws an exception since it is expecting a native version of the div and instead gets a wrapped one since this.$.graph_canvas corresponds to the wrapped version of the div and not the actual native one. So I tried to unwrap this.$.graph_canvas. Now the next problem comes into picture when the library is trying to create some DOM elements using document.createElement .document.createSVGElement etc. Now these elements that are created by the library are wrapped (since platform.js and polymer.js are already loaded) and the library again throws an error.

So inorder to solve this problem, I passed shadow=native as a parameter in the query string and everything works fine. The library is happy and so is my code. 

But now the problem is, my application can run only on Chrome and Opera since other browsers do not have the native support for Shadow DOM. Is there any other way to solve this problem?

Any help will be appreciated.

Thanks. 

[Scott Miles]

>> But the library throws an exception since it is expecting a native version of the div and instead gets a wrapped one

This is the key moment. We need to know what the library is trying to do that is not supported by the wrapper.

Trying to 'unwrap' the wrapper is absolutely the last resort, and usually causes more trouble that it's worth. I know this from personal experience. =P

Scott

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/701bc577-457a-44f9-ba55-e4bb511fb045%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Erik Arvidsson]

Also, make sure that you include platform.js before any other script on the page.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHbmOLbyYyQB7uVMx7_LtaROcBWBT1ww%3Dof-Qr-rH6FSqo3ySg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
erik

[amrut...@gmail.com]

I am just including require.js before platform.js.

[amrut...@gmail.com]

The library is simply trying to create div's and SVG elements under the graph_canvas div. The element created after calling document.createElement is a wrapped element. 

[amrut...@gmail.com]

Is there any other information you would like to know ?

Amruta

On Monday, March 10, 2014 5:42:38 PM UTC-4, Scott Miles wrote:

[Scott Miles]

>> The library is simply trying to create div's and SVG elements under the graph_canvas div. 

You need to be more specific about the exact bit of code that is throwing an error. 

The wrapped node is intended to function identically to a native node, so we can't guess what is wrong, we need to know what function call failed.

 

Scott

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/635e1900-6cab-4ea0-8ffe-0bee60793251%40googlegroups.com.

[amrut...@gmail.com]

A lot got changed since I posted the question. The latest error was a Type error "Cannot set title of type undefined". (this.impl.title which I believe is the actual title of the native DOM element) The exception was thrown on the ready event of a polymer element whose name is "node". This node represents any particular node on the graph and it publishes properties x,y and title. When I was trying to create an instance of the node element with

<node x=100 y=100 title="StartNode"></node>

the library threw the error. I checked the call stack and it indicated it was something related to publishing the attributes of the node element. So, after changing the the attribute "title" to "nodeTitle" it worked. Voila ! 

My understanding is, this happened because the system was getting confused the HTML "title" attribute and the "title" attribute that I was publishing as a part of the "node" element declaration. But I did not get why wasn't this problem faced when I called the webpage with shadow=native.

Now I can see the webpage without shadow=native

[amrut...@gmail.com]

P.S: The node element was not there when I had posted this question. The error I was getting earlier was completely different. No idea how it went away. May be because of some architectural changes that I made

--Amruta

[Rob Dodson]

I noticed in your example your element was called <node>. Custom Elements need to have a dash "-" somewhere in their name. <my-node>, for example, would be a better name.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/60c93484-3e65-4e26-a387-7bfee8318820%40googlegroups.com.

[amrut...@gmail.com]

Sorry, my bad. The element was called <cmp-node>.

Amruta