I'm trying to learn Polymer 2.0 but am stuck with the problem of getting an element from a different Shadow Dom. This worked in Polymer 1 but no longer in Polymer 2.0. What is the correct way of writing this? It just tells me that the targetText = Null.

Thanks for your help!

This is a MWE: Polymer WC 1:

<dom-module id="sc-navdrawer">
<template>
<style is="custom-style">
p {
  font-weight: bold;
}
.changed {
  color: red;
}
</style>
<p>Some text in normal p tag</p>
<div id="test" class="htmltextcontent" inner-h-t-m-l="{{inputText}}"></div>
</template>

<script>
    Polymer({
        is: 'sc-navdrawer',
        properties: {
          inputText: {
            type: String,
            value: "<p>Some innerhtml text in p tags</p>"
          }
        }
    });

</script>
</dom-module>

Polymer WC 2:

<dom-module id="sc-testpage">
<template>

<button onclick="{{changeColor}}">Click here to change color</button>
</template>

<script>
    Polymer({
        is: 'sc-testpage',
        changeColor: function() {
          var targetText = document.getElementById("test");
          console.log(targetText);
          targetText.classList.add("changed");
        }
    });

</script>
</dom-module>

I'm trying to learn Polymer 2.0 but am stuck with the problem of getting an element from a different Shadow Dom. This worked in Polymer 1 but no longer in Polymer 2.0. What is the correct way of writing this? It just tells me that the targetText = Null.

Thanks for your help!

This is a MWE: Polymer WC 1:

<dom-module id="sc-navdrawer">
<template>
<style is="custom-style">
p {
  font-weight: bold;
}
.changed {
  color: red;
}
</style>
<p>Some text in normal p tag</p>
<div id="test" class="htmltextcontent" inner-h-t-m-l="{{inputText}}"></div>
</template>

<script>
    Polymer({
        is: 'sc-navdrawer',
        properties: {
          inputText: {
            type: String,
            value: "<p>Some innerhtml text in p tags</p>"
          }
        }
    });

</script>
</dom-module>

Polymer WC 2:

<dom-module id="sc-testpage">
<template>

<button onclick="{{changeColor}}">Click here to change color</button>
</template>

<script>
    Polymer({
        is: 'sc-testpage',
        changeColor: function() {
          var targetText = document.getElementById("test");
          console.log(targetText);
          targetText.classList.add("changed");
        }
    });

</script>
</dom-module>

• javascript
• polymer-2.x

• Are these two Elements in anyway related to each other ? Meaning that they have a child parent relation ? – Niklas Commented Aug 3, 2017 at 7:19

3 Answers 3

Well first thing that I see is you use document.getElementById("test"); and if you say this worked you have used Shady Dom.
Polymer 2 forces you to use Shadow Dom so this mand should be replaced by Polymer.dom(this.root).querySelector("#test"). Because Shadow Dom encapsulates your Component you cant access its content with the document Object
But this should not fix your Problem. This Encapsulation means you can´t access the Content of a WebComponent so you cannot access an element with id:xyz from another Component. Have a look at these links they will explain to you how shadowDom works:
1. https://www.html5rocks./en/tutorials/webponents/shadowdom/
2. https://developer.mozilla/en-US/docs/Web/Web_Components/Shadow_DOM
3. https://glazkov./2011/01/14/what-the-heck-is-shadow-dom/

Try using paper-input and setting it's value:

<paper-input id="test" label="input" value="{{inputText}}"></paper-input>

Then you can access the variable like this:

var targetText = this.$.inputText;

(this should work with other elements other than paper-input)

1. Instead of using getElementById you should be using Automatic node finding This works if your two Elements have a child parent relation to each other.
2. I also believe instead of using a onclick on your button in WC 2, you should be using a on-tap. This is the remended way in the Polymer documentation.
   
   

3. Further on, I do not really understand why you are using two way data binding on your onclick attribute. I might be missing something but your code should work perfectly fine with a normal function call.
   
   

   <dom-module id="sc-testpage">
      <template>
        <button on-tap="changeColor">Click here to change color</button>
      </template>
   
      <script>
        Polymer({
          is: 'sc-testpage',
   
          changeColor: function() {
            var targetText = this.$.sc-navdrawer.$.test;
            console.log(targetText);
            targetText.classList.add("changed");
          }
        });
   
       </script>
   </dom-module>