如何识别我的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的浏览器，它可以通过比较开箱即用 带有组件hashCode的document.activeElement的hashCode。

对于没有shadow DOM支持的浏览器，密码字段将是 活跃的元素。这里的技巧是包装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;
      }
  }
}

Answer 2

bool isActive(event) {
  return document.activeElement == this;
}

这仅适用于具有本机Shadow DOM支持的浏览器 我还没有对它进行过测试，但这可能只适用于<custom-password>元素在轻型DOM中而不在<template>之类的<app-element>内部，如果您使用的话。{/ {} p>

当前的polyfill似乎无法正常工作，您将返回输入元素而不是Polymer元素。

这些问题包含有关activeElement如何与Polymer元素一起使用的信息 - https://github.com/Polymer/ShadowDOM/issues/478
- https://code.google.com/p/dart/issues/detail?id=18982
- https://code.google.com/p/dart/issues/detail?id=20165

以及本段 - http://www.w3.org/TR/shadow-dom/#active-element