使用Shady DOM document.getElementByID()的Polymer 2.0

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Shady DOM document.getElementByID()的Polymer 2.0相关的知识,希望对你有一定的参考价值。

我使用以下脚本在Polymer 2.0中使用Shady DOM

<script>window.ShadyDOM = {force:true};</script>

我创建了三个自定义元素登录电子邮件,登录密码和登录按钮。单击纸张按钮时,我想获取登录电子邮件和登录密码的纸张输入值。使用Polymer 1.0我使用了document.getElementById('#emailLogon')。value来获取另一个自定义元素的值,但是在使用Shady DOM的Polymer 2.0中返回null。

如果我现在无法做什么,那么从另一个自定义元素的外部自定义元素中检索值的替代方法是什么。

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">

    <link rel="import" href="../bower_components/paper-input/paper-input.html">

    <dom-module id="logon-email">
      <template> 
        <style include="shared-styles">
        :host {
            display: block;

            padding: 10px;

          }

          paper-input {
            --paper-input-container-input-color: white; 
            --paper-input-container-label: { color: white; font-size: 12px};
          }

          .email_label {
            font-family: 'Roboto', 'Noto', sans-serif;
            font-size:      12px;  
            color: white;           
          }

        </style>
        <div class="email_label">Email</div>
        <paper-input label="Please enter your email address" no-label-float></paper-input>

      </template> 

      <script>
        class LogonEmail extends Polymer.Element {
          static get is() { return 'logon-email'; }
        }
        window.customElements.define(LogonEmail.is, LogonEmail);
      </script>
    </dom-module>

<dom-module id="logon-password">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;

      }

      paper-input {
        --paper-input-container-input-color: white;
        --paper-input-container-label: { color: white; font-size: 12px; };    
      }    

      .password_label {
        font-family: 'Roboto', 'Noto', sans-serif;
        font-size:      12px;  
        color: white;           
      }   

    </style>

    <div class="password_label">Password</div>
    <paper-input id="logonPassword" label="Please enter your password" type="password" no-label-float></paper-input>

  </template>

  <script>
    class LogonPassword extends Polymer.Element {
      static get is() { return 'logon-password'; }
    }

    window.customElements.define(LogonPassword.is, LogonPassword);
  </script>
</dom-module>

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">

<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-styles/color.html">

<dom-module id="logon-button">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }


      paper-button {
        font-family: 'Roboto', 'Noto', sans-serif;
        font-weight: normal;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
      }  

      paper-button.green {
        background-color: var(--paper-green-500);
        color: white;
        margin: auto;
        width: 100%;
      }

    </style>

    <paper-button on-click="handleLoginClick" raised class="green">Login</paper-button    

  </template>

  <script>
    class LogonButton extends Polymer.Element {
      static get is() { return 'logon-button'; }
            connectedCallback() {
              super.connectedCallback();
            }

        handleLoginClick(){
          console.log('Login button clicked');
          var loginEmail = document.getElementById('#logonEmail');

          console.log('logonEmail ' + loginEmail);
        }
    }

    window.customElements.define(LogonButton.is, LogonButton);
  </script>
</dom-module>
答案

这是聚合物在元素之间传递值的最简单方法。因此,只需定义属性并将其设置为notify:true即可将其他元素反映为fallow:

<paper-input label="Please enter your email address" no-label-float value="{{emailVal}}"></paper-input>

在主文档中将emailVal属性传递给您的自定义元素,因此您在所有3个元素中都拥有属性,例如this.emailVal

 <logon-email email-val="{{emailVal}}"></logon-email>
 <logon-password email-val="{{emailVal}}"></logon-password>
 <logon-button email-val="{{emailVal}}"></logon-button>

并在logon-email元素中定义此属性并将其设置为notify:true以反映任何更改中的所有属性。在logon-email

  static get properties() { return { 
     emailVal:{
        type:String,
        notify:true
   },...

logon-button元素:

 handleLoginClick(){
      console.log('Login button clicked');
      console.log('logonEmail ', this.emailVal);
    }

希望清楚。

以上是关于使用Shady DOM document.getElementByID()的Polymer 2.0的主要内容,如果未能解决你的问题,请参考以下文章

html Shady DOM示例

使用Shady DOM document.getElementByID()的Polymer 2.0

聚合物组件Shady DOM样式只是对生产的评论

DOM 对象

用原生Dom实现向表格中添加数据

js--DOM&事件