CODEWITHSUNDEEP
javascripthtmlpolymer
His
His

Reputation: 6053

Accessing native HTML element in Polymer

I have the following web component. I need to access the form, which is a native HTML element (not a Polymer web component), when the web component is created. However it (alert(document.forms[0])) returns undefined. How can I do this?

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="my-component">
  <template>
    <style>
    </style>

    <div id="mydivid">
      <form action="" method="post" autocomplete="off">
        <div>
          <input type="text" id="myinput" value="">
        </div>
        <div>
          <input id="mybutton" type="submit" value="Log in">
        </div>
      </form>
    </div>
    <script>
    </script>
  </template>

  <script>
    Polymer({
      is: 'my-component',
      created: function() {
        alert(document.forms[0]);
      }
    });
  </script>
</dom-module>
<my-component></my-component>

Upvotes: 1

Views: 269

Answers (1)

a1626
a1626

Reputation: 2964

As your form element is inside the dom of your custom element you should search for it in the same location.

Also, you won't find it during created callback. 

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="my-component">
  <template>
    <style>
    </style>

    <div id="mydivid">
      <form id="myForm" action="" method="post" autocomplete="off">
        <div>
          <input type="text" id="myinput" value="">
        </div>
        <div>
          <input id="mybutton" type="submit" value="Log in">
        </div>
      </form>
    </div>
    <script>
    </script>
  </template>

  <script>
    Polymer({
      is: 'my-component',
      attached: function() {
        alert("my forms" + this.$.myForm[0]);
      }
    });
  </script>
</dom-module>

<my-component></my-component>

Upvotes: 1

Related Questions