this.$ gets polluted with shadow dom of other components

[BraulioVM]

Hi! I am writing a polymer component and think I might have found something not working quite well with polymer (it might as well be that the error is mine, but have not been able to discover it).

The component is something like this:

<link rel="import" href="./bower_components/polymer/polymer.html">

<polymer-element name="sound-library">
    <template>
        <div id="sound-holder">
            <template repeat="{{ sound in sound_library }}">

                <audio class="sl-audio" src="{{ sound.path }}" id="sound_{{sound.name}}">

            </template>
        </audio>
    </template>
    <script>
    (function(){


        Polymer("sound-library", {

            (...)

            ready: function(){

                this.sound_holder = this.$["sound-holder"];



                this.getSoundsFromAttributes();


                this.buildSoundMethods();



            },

            (...)

    })();
    </script>
</polymer-element>

I also have an example document using that code, in which I am using that component twice, like this:

<sound-library beep="assets/beep1.mp3" notification="assets/notif.mp3" cancel="assets/error.mp3" id="sounds"></sound-library>
    <sound-library beep="assets/beep1.mp3" notification="assets/notif.mp3" cancel="assets/error.mp3" id="sounds2"></sound-library>

When I debug the ready method there is no problem the first time it's called (with this = #sounds), but when it's called the second time, I can find in this.$ nodes from #sounds shadow DOM, even those in the template-repeat (and clearly those shouldn't be found).

The problem might be related to the way in which this.$ is set. However, I find it quite strange that no other components have had this bug, so that's why I think the error could be mine.

I am sorry if I have not made myself clear enough, it's the first time I post an issue.

Thank you.

Braulio Valdivielso

[davidmaxwaterman]

I think the problem might be that you have declared your sound_library
array in the prototype of the element. Instead, create them inside the
create method of the element. Only simple variables can be declated in the
prototype - search for 'array' on this page :

https://www.polymer-project.org/docs/polymer/polymer.html

On 4 January 2015 at 11:05, Braulio Valdivielso Martínez <
[email protected]> wrote:

Hi! I am writing a polymer component and think I might have found
something not working quite well with polymer (it might as well be that the
error is mine, but have not been able to discover it).

The component
https://github.com/BraulioVM/sound-library/blob/master/element.html is
something like this:

            <audio class="sl-audio" src="{{ sound.path }}" id="sound_{{sound.name}}">

        </template>
    </audio>
</template>    <script>    (function(){        Polymer("sound-library", {            (...)            ready: function(){                this.sound_holder = this.$["sound-holder"];                this.getSoundsFromAttributes();                this.buildSoundMethods();            },            (...)    })();    </script>

I also have an example
https://github.com/BraulioVM/sound-library/blob/master/examples/basic.html
document using that code, in which I am using that component twice, like
this:

When I debug the ready method there is no problem the first time it's
called (with this = #sounds), but when it's called the second time, I can
find in this.$ nodes from #sounds shadow DOM, even those in the
template-repeat (and clearly those shouldn't be found).

[image: image]
https://cloud.githubusercontent.com/assets/715372/5604573/1137cc56-93c5-11e4-92d3-6da9eb1679ff.png

The problem might be related to the way in which this.$ is set. However, I
find it quite strange that no other components have had this bug, so that's
why I think the error could be mine.

I am sorry if I have not made myself clear enough, it's the first time I
post an issue.

Thank you.

Braulio Valdivielso

—
Reply to this email directly or view it on GitHub
#1069.

[davidmaxwaterman]

I should have mentioned that the same is true of reserved_attribute_names
and sounds; and I'm looking at the code here (in case others need to look
quickly):

https://github.com/BraulioVM/sound-library/blob/master/element.html

On 4 January 2015 at 11:17, Waterman, Max [email protected] wrote:

I think the problem might be that you have declared your sound_library
array in the prototype of the element. Instead, create them inside the
create method of the element. Only simple variables can be declated in the
prototype - search for 'array' on this page :

https://www.polymer-project.org/docs/polymer/polymer.html

On 4 January 2015 at 11:05, Braulio Valdivielso Martínez <
[email protected]> wrote:

Hi! I am writing a polymer component and think I might have found
something not working quite well with polymer (it might as well be that the
error is mine, but have not been able to discover it).

The component is something like this:

            <audio class="sl-audio" src="{{ sound.path }}"

id="sound_{{sound.name}}">

        </template>
    </audio>
</template>
<script>
(function(){


    Polymer("sound-library", {

        (...)

        ready: function(){

            this.sound_holder = this.$["sound-holder"];



            this.getSoundsFromAttributes();


            this.buildSoundMethods();



        },

        (...)

})();
</script>

I also have an example document using that code, in which I am using
that component twice, like this:

When I debug the ready method there is no problem the first time it's
called (with this = #sounds), but when it's called the second time, I can
find in this.$ nodes from #sounds shadow DOM, even those in the
template-repeat (and clearly those shouldn't be found).

The problem might be related to the way in which this.$ is set. However,
I find it quite strange that no other components have had this bug, so
that's why I think the error could be mine.

I am sorry if I have not made myself clear enough, it's the first time I
post an issue.

Thank you.

Braulio Valdivielso

—
Reply to this email directly or view it on GitHub.

[BraulioVM]

Ok, just now I saw that the problem had nothing to do with this.$ but with sound_library, and then you have answered!

Thank you very much, you really helped me!