dart - 如何确定我的 Polymer.dart 组件是否仍然是 document.activeElement？

Question

我有一个 CustomPassword 组件，并希望提供一个方法 isActive，允许您检索该组件是否仍然是该网站上的事件元素。

示例代码:

custom_password.html

<polymer-element name="custom-password">
  <template>
    <div>Other things here</div>
    <input id="password-field" type="password" value="{{value}}">
  </template>
  <script type="application/dart" src="custom_password.dart"></script>
</polymer-element>

custom_password.dart

import 'package:polymer/polymer.dart';

@CustomTag('custom-password')
class CustomPassword extends PolymerElement {

  @published
  String value;

  CustomPassword.created() : super.created() {
  }

  bool isActive() {
    // TODO figure out if the CustomPassword element is still active.
    return false;
  }
}

Answer 1

在 Polymer Group 的帮助下我想出了一个解决方案:

对于支持 Shadow DOM 的浏览器，通过比较它可以开箱即用document.activeElement 的 hashCode 及其组件的 hashCode。

对于不支持 Shadow DOM 的浏览器，密码字段将是 active 元素。这里的技巧是包装 document.activeElement 以便将其与包装的 passwordField 进行比较。

示例:

custom_password.dart

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:js' as js;

@CustomTag('custom-password')
class CustomPassword extends PolymerElement {

  @published
  String value;

  CustomPassword.created() : super.created() {
  }

  bool isActive() {
      var passwordField = $['password-field'];
      var activeElement = js.context.callMethod('wrap', [document.activeElement]);

      // For Browsers with shadow DOM support the shadowRoot.host matches while
      // for Browsers without shadow DOM support the password field match.
      if (activeElement.hashCode != hashCode &&
          activeElement.hashCode != passwordField.hashCode) {
        return false;
      } else {
        return true;
      }
  }
}