is there a way to disable shadow DOM?

2,187 views
Skip to first unread message

rua...@gmail.com

unread,
Apr 30, 2014, 8:55:09 PM4/30/14
to polym...@googlegroups.com
I'm just interested in the custom elements part.  Shadow DOM inter fears with some third party libraries I want to use.  is there a way to disable this?

rua...@gmail.com

unread,
Apr 30, 2014, 9:03:44 PM4/30/14
to polym...@googlegroups.com, rua...@gmail.com
sometime a third party library need access to the sub DOM from outside the custom element.

Erik Arvidsson

unread,
May 1, 2014, 11:42:33 AM5/1/14
to rua...@gmail.com, polym...@googlegroups.com
Could you file bugs for the issues you are running into with the Shadow DOM polyfill? (Native Shadow DOM is shipping and cannot be turned off).


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/1b075422-0b93-4a12-a4ab-88f2fbc0689e%40googlegroups.com.

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



--
erik


Justin Fagnani

unread,
May 1, 2014, 1:16:20 PM5/1/14
to Erik Arvidsson, rua...@gmail.com, polym...@googlegroups.com
I think Diego is talking about about making elements that don't use shadow DOM, presumably because something like (just making this up) $('p').hide() won't effect nodes inside shadow trees.

Diego,

  If you think through it, non-shadow DOM elements don't work out so well. The first issue is the conflict between the element's children and it's template if the template is stamped out into the light DOM. For example, lets say you have <my-element> with a template with nodes that would normally go in the shadow root:

<polymer-element name="my-element">
  <template>
    <h1>My Element</h1>
    <content></content>
  </template>
</polymer-element>

And now let's say you use my-element with a child:

<my-element>
  <p>Hello Polymer</p>
</my-element>

var e = document.querySelector('my-element');

How many children does the element have: 1 or 2? What is e.children[0]? Is it <h1>MyElement</h1> or <p>Hello Polymer</p>?

You might want to post more details about what you're trying to accomplish, and quite possibly it can with with shadow DOM.

One thing I tell people is to focus on the fact that you're implementing an element, not a page. You can use many libraries just fine to help implement an element, and you can use them to help you use elements. What's difficult, by design, is to use them to cross the using / implementing (or outside / inside) element boundary. If there's a node inside your element's shadow root, that's an implementation detail and you don't want scripts outside the element to mess with it.

Often the simplest solution is to just use the library, but make the context of what your doing be the shadow root, or some nodes within it. Using jQuery as an example again, instead of $('p').hide(), you can write $('p', this.shadowRoot).hide().

Hope that helps,
  Justin


Reply all
Reply to author
Forward
0 new messages