Shadow-root and extend

120 views
Skip to first unread message

Xavier Cochard

unread,
Jul 20, 2014, 9:11:00 PM7/20/14
to polym...@googlegroups.com
Hello,

I am using 2 components A and B, both having a Template and a Script tag. Both templates also use conditional template.
I am confused when extending B by A, that two "#shadow-root" appear while inspecting the dom.

<my-element-B ....>
  |> #shadow-root  (from B)
  |> #shadow-root  (from A)
</my-element-B>

Is there a way to only see B such as:

<my-element-B ....>
  |> #shadow-root  (from B)
</my-element-B>

In that sense I only want to extends the prototype and fully override the Template.

Thanks
Xavier

(using chrome 36 and latest polymer)


Rob Dodson

unread,
Jul 21, 2014, 6:31:45 PM7/21/14
to Xavier Cochard, polymer-dev
While the shadow-root from A is present, it shouldn't actually render anything. It's there in case you want to use the shadow element to create a shadow insertion point.


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/22beb6d4-4aea-47e0-903a-4577724eaa31%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Xavier Cochard

unread,
Jul 21, 2014, 6:47:32 PM7/21/14
to polym...@googlegroups.com, xavier....@gmail.com
It doesn't render anything. But I was worried about performances mainly. Also for debugging purpose it would be a bit easier if not there, as not needed for my case.

Thanks for the link and explanation.

Rob Dodson

unread,
Jul 21, 2014, 7:09:51 PM7/21/14
to polym...@googlegroups.com, xavier....@gmail.com
There is a cost associated with creating shadow-roots. Since it sounds like A and B share some behavior, but don't share content, it might make more sense to factor that behavior into its own base class/element that both A and B extend. Or add the behavior using something like Platform.mixin (which is unfortunately undocumented, but it basically lets you combine prototypes. here's an example)

Xavier

unread,
Jul 21, 2014, 8:31:26 PM7/21/14
to Rob Dodson, polymer-dev
That's sound good. 

I re-factored to exclude the content from the base (A) and it feels slightly faster. At least it's cleaner.

Thanks;)
Reply all
Reply to author
Forward
0 new messages