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.
On Tue, Feb 25, 2014 at 10:49 AM, Just.A.Guy <[email protected]>wrote:
> 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.
>
>
> 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 [email protected].
> 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.
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZgsyOmENmM-21oB-Zpo2gXnj7mR_tLoksV_ZB8MWCs3rw%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.
