Question

我有以下网络组件。我需要在创建Web组件时访问表单，该表单是本机HTML元素（不是Polymer Web组件）。但是它（alert(document.forms[0])）返回undefined。我怎么能这样做？

<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>

Answer 1

由于您的表单元素位于自定义元素的dom内，因此您应该在同一位置搜索它。

另外，你在created callback期间找不到它。

＆＃13;

<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>

＆＃13;

在Polymer中访问本机HTML元素

1 个答案: