Access to calling document's DOM and to polymer-element's shadow DOM

[Just.A.Guy]

I have read several articles on the basic underlying structure of custom elements (implemented outside of polymer).

Questions: 

1. In one of those articles, I understand it to say that in the "ready" (i.e.createdCallback) function, the 

   "document" object points to the calling document's DOM and the "document._currentScript.ownerDocument"

   points to the shadowRoot (i.e. DOM) of the custom element.

 

  Now in the polymer-element environment the "ready" callback is different.

  The "document._currentScript.ownerDocument" does not point to the shadowRoot; it is null.

  Instead you provide an array of all nodes with "id"s under document.$; and also gives

  access to the polymer-element's attributes (as I understand this(?)).

  Yet the custom element object at "document.getElementsByTagName('<polymer-custom-element-name>')[0].shadowRoot"

  points to the shadowRoot's element for the custom-element

  Why not map "document.getElementsByTagName('polymer-custom-element')[0].shadowRoot"

   to the document._currentScript.ownerDocument? 

2. To what does the  "document" object point in the ready callback function 

3. To what does the "this" object point in the ready callback function?

I think I understand the idea of keeping the custom element encapsulated. But the callback routines are single threaded, at least as

I understand.  So providing access to the shadowRoot in one of its callback routines should not be a problem. At that time the

underlying structure is stable. (Am I wrong in this understanding)?  Why do I want this. Because, then the custom element

is just like the main document. I do not have to write different code (e.g. document.$) when I am working in a custom document

callback environment. 

[Steve Orvell]

HTMLImports import documents and allow scripts to run in them. The value of document._currentScript.ownerDocument is always the document within which the currently existing script is executing. This may be an imported document or the main document. 

Elements can create shadowRoots and put elements inside of them. You can then access this shadowRoot with element.shadowRoot.

Now to your questions:

 

1. In one of those articles, I understand it to say that in the "ready" (i.e.createdCallback) function, the 
   "document" object points to the calling document's DOM and the "document._currentScript.ownerDocument"
   points to the shadowRoot (i.e. DOM) of the custom element.

"ready" is a method that elements defined via polymer-element have. It is not part of the custom elements spec. Polymer calls ready when an element's template has been stamped into its shadowRoot, its event listeners are hooked up, and its property observers are created. The document._currentScript reference is null when an element is upgraded because this reference is only maintained during the main execution of a script element. In this case we've registered script to run when an element is upgarded/created.

2. To what does the  "document" object point in the ready callback function 

The document reference on window (window.document) always points to the main document.

3. To what does the "this" object point in the ready callback function?

The element itself: <x-foo></x-foo>. So if you want to access an element's shadowRoot, you'd do this.shadowRoot. You can safely use id's on elements inside ShadowDOM. The id's are scoped to the shadowRoot. In polymer we automatically provide references to these elements in the element's this.$. map. Here's an example:

    <polymer-element name="x-foo">

      <template>

        <div id="special">Special</div>

      </template>

      <script>

        Polymer('x-foo', {

          ready: function() {

            console.log(this.$.special.textContent);

          }

        });

      </script>

    </polymer-element>

You can also find elements via querySelector. For example, in code running in a custom element method: this.shadowRoot.querySelector('#special');

Hope that helps.

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/22e11b3f-115e-4eb5-a92c-fd40193707fe%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.