I recently posted about this on stack overflow
<http://stackoverflow.com/questions/25758402/how-do-i-access-a-polymer-core-style-producer-element-to-set-its-fields?noredirect=1#comment40305508_25758402>,
where Eric Bidelman was nice enough to respond. I thought I'd bring it up
here as well, however, since I had some additional questions, and SO
doesn't like being used as a conversation medium.
I have an html import file that looks roughly like this:
<core-style id="my-style">
.main {
background-image: url({{ imageUrl }});
}
</core-style>
<polymer-element name="my-element">
<template>
<core-style ref="my-style"></core-style>
<div class="main">
Some content.
</div>
</template>
<script>
Polymer('my-element', {
ready: function() {
someAsyncFunctionWithACallback(this.callback);
},
callback: function(url) {
// I'd like stick the value of "url" into the my-style producer
element's "imageUrl" property,
// so it updates the consumer core-style for "my-element"
}
});
</script>
</polymer-element>
My original issue was that I didn't know how to get a reference to that
first core-style element that serves as the my-style producer. From inside
my-element's callback, both document.getElementById and
document._currentScript.ownerDocument.getElementById returned a null when
given "my-style."
Eric pointed out that the
document._currentScript.ownerDocument.getElementById call needed to take
place in a separate script tag, outside the my-element definition. If
that's done, it does return a reference to the correct object. At that
point, though, I'm outside the scope of my element and would need to do
some weirdness to retrieve the value from it and place it in the correct
spot.
At this point, I feel like I have a few options:
1) Add the additional script tag, define a global function in it to
getElementById the instance of my-element and the my-style producer and
move the value from one to the other. This would then be called inside the
my-element callback.
2) Inside the callback, put the url value into a well-named property of the
CoreStyle.g global object and then reference it in the producer.
3) Inside the callback, grab a reference to the producer from the static
CoreStyle.list array of producers (CoreStyle.list['my-style']) and assign
the property to it that way.
I tested option #3, and it works, though I'm not sure if this is hackery
that could fall victim to a race if my-style and my-element are one day
moved into different files and loaded separately.
I've only been messing around with Polymer for a few weeks, and I'm still
in the "I don't know if this is right, but it works" phase of learning, so
it's quite possible I've missed an obvious way to do this. All I'm really
looking for is a way to correctly maintain a reactive css rule for
my-element, so any suggestions are welcome.
-Andrew
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/faf7824c-888c-464c-a122-348f74d9a658%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
