如何在 shadow DOM 中调用 Dart Polymer 元素的方法？答案

【问题标题】：How to call a method of a Dart Polymer element in the shadow DOM?如何在 shadow DOM 中调用 Dart Polymer 元素的方法？
【发布时间】：2014-10-06 08:27:48
【问题描述】：

我最近开始学习 Dart 和 Polymer，发现了一个问题。我在 Polymer 中写了一个 my-loginarea 元素，其中包含两个 Polymer 元素 username-input 和 password-input。两者都有一个 Dart 脚本，它有一个方法来检查输入是否为空。

  String verifyPassword() {
    if(password == null || password.isEmpty) {
      errorMsg = "Password empty";
    }
    return errorMsg;
  }

如果登录按钮被按下，则调用my-loginarea元素的方法verifyLogin()来验证输入。我希望这个方法在username-input 和password-input 上调用verifyPassword 方法，但我不知道如何调用这些方法或至少如何获取这些元素实例的引用。

这里是 LoginArea.html 的代码：

<polymer-element name="my-loginarea"> 
<template>    
<template if="{{!userLoggedIn}}">
<div align="center">
  <table>
    <tr>Username:
      <login-usernameinput></login-usernameinput>
    </tr>
    <tr>Password:
      <login-passwordinput></login-passwordinput>
    </tr>
    <tr>
      <button on-click="{{verifyLogin}}">Login</button>
    </tr>

    <span id="error" hidden?="{{errorMsgs.isEmpty}}">
      <template repeat="{{err in errorMsgs}}">
      <p>{{err}}</p>
    </span>
  </table>
</div>

</template> 

<template if="{{userLoggedIn}}">
  <div align="center">
    <p>Successfully logged in!</p>
    <button on-click="{{userLogout}}">Logout</button>
  </div>
</template> 

<script  type="application/dart" src="loginBehaviour.dart"></script>
</polymer-element>

【问题讨论】：

如果您可以添加更多代码会很有帮助。 HTML 中的元素是如何组织的？您提到的 Polymer 元素是否包含在同一个（父）Polymer 元素中，还是直接在您的条目页面的 HTML 中（`index.html'）？
我刚刚编辑了我的问题并添加了一些 HTML 代码
我更新了答案。
我在回答中添加了更多信息。

标签： dart dart-polymer

【解决方案1】：

我建议您在<login-usernameinput id="username"> 和<login-passwordinput id="password"> 中添加id 属性

在您的verifyLogin() 方法中，您可以像调用verifyPassword() 一样

void verifyLogin(MouseEvent e) {
  if($["username"].verifyPassword()) {
    print('username is fine');
  } else {
    print('username is missing/invalid');
  }

  if($["password"].verifyPassword()) {
    print('password is fine');
  } else {
    print('password is missing/invalid');
  }
}

不添加id 属性，您可以这样称呼它

void verifyLogin(MouseEvent e) {
  if(shadowRoot.querySelector("login-usernameinput").verifyPassword()) {
    print('username is fine');
  } else {
    print('username is missing/invalid');
  }

  if(shadowRoot.querySelector("login-passwordinput").verifyPassword()) {
    print('password is fine');
  } else {
    print('password is missing/invalid');
  }
}

如果没有shadowRoot，可能会调用文档的querySelector，这样就不会在其他Polymer 元素中找到元素。 shadowRoot.querySelector 在当前 Polymer 元素内搜索。

您也可以使用document.querySelector('* /deep/ login-usernameinput')（或只是querySelector('* /deep/ login-usernameinput')）在所有Polymer 元素中使用querySelector 搜索shadow DOM，但不鼓励这样做，因为它破坏了封装，当然速度较慢，因为它必须搜索整个页面.但在某些情况下，这可能会派上用场。

【讨论】：