Shadow DOM polyfill can't wrap accessors directly on document, so that's
why `document.activeElement` doesn't work. Things like `document.head` have
the same problem, see [1]. The usual answer is to introduce a querySelector
or some other method call, which kicks in the polyfill. Or you can call:
ShadowDOMPolyfill.wrap(document.activeElement)
Calling that method from Dart would involve JS interop. I'm not an expert
there, but maybe something like:
// might need a `new JsObject.fromBrowserObject()` around the method arg,
not sure
context['ShadowDOMPolyfill'].callMethod('wrap', [document.activeElement]);
[1]: documented here https://github.com/Polymer/ShadowDOM#wrap-and-unwrap
On Thu, Jul 24, 2014 at 8:39 AM, Justin Fagnani <[email protected]>
wrote:
> [email protected], John
> On Jul 24, 2014 8:20 AM, "Nik Graf" <[email protected]> wrote:
>
>> I would like to identify if my component is still the active element
>> after a blur event.
>>
>> Here example code & a use-case to provide more Context:
>>
>> <polymer-element name="b-secret">
>> <template>
>> <div>Other things here</div>
>> <input id="password-field" type="password" value="{{value}}">
>> </template>
>> <script type="application/dart" src="secret.dart"></script>
>> </polymer-element>
>>
>> A user clicks on a custom input element (b-secret). If you call
>> document.activeElement you will get the custom element (b-secret) for
>> Browsers supporting ShadowDOM. In Firefox (no ShadowDOM support) for
>> example you will get the actual input element (#password-field) inside your
>> component.
>>
>> While I guess fixing document.activeElement is not really possible I
>> would expected shadowRoot.querySelector('#password-field').hashCode to be
>> the same as document.activeElement.hashCode.
>>
>> I investigate a bit and recognized that the ShadowDOM shim creates a
>> wrapper object for the queried input field when compiled to JavaScript. The
>> wrapper object is aware of the field's hashCode I'm looking for, but I
>> can't access it through Dart. See the annotated Screenshot:
>> http://cl.ly/image/3F2b1l343O43
>>
>> You can find the real world example here:
>> https://github.com/blossom/bee/blob/secret-ff-fix/lib/components/secret/secret.dart#L100
>>
>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "Polymer" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected].
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/d7a1192a-4520-4b0d-869f-88c8f524e841%40googlegroups.com
>> <https://groups.google.com/d/msgid/polymer-dev/d7a1192a-4520-4b0d-869f-88c8f524e841%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAJup4OXw7xwUt5TjB6sodnT6JKV%2B7SKUavK%3Ds25S_goaUza0BQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
