Shadow DOM. Support for AWS Amplify Authenticator

Are there any plans to support shadow DOMs in 1Password X (the non-companion extension)?

I's been a year the question was raised in the closed discussion by @elahd here Shadow DOM / Polymer forms do not fill. (companion extension v4.7.4 now supports shadow DOMs) - Page 2 — 1Password Support Community but I can not find any news or plans to implement in the browser extension.

I'm using 1Password for more than 3 years and very satisfied with its features. Was very disappointed once I tried to implement Authentication - Authenticator - Amplify Docs. 1Password X extension for Chrome does not recognize, autofill, autocomplete fields if created in shadow DOM.

AWS Amplify is increasing its adoption and the the shadow DOM is not a recent technology discovered. It is a good chance to initiate the corresponding 1P X development catching the trend.

As I see the current 1P Windows application is supporting shadow DOM fields in Chrome already, so must be not a big effort to adopt in 1Password X extension for browsers.

Samples where 1Password X doesn't catch the registration fields in shadow root (child of ):


1Password Version: 7.6.797
Extension Version: 1.25.6
OS Version: Windows 10 Pro (version 20H2)
Sync Type: Not Provided

Comments

  • ag_michaelcag_michaelc

    Team Member

    Hey @AlexanderChupin. Welcome to the community. :smile: We'd definitely like to support shadow DOMs in the future, but I don't have anything concrete to offer at the moment. I wish I had better news, but I will give the development team another ping and let know that this is a pain point for you.

    ref: dev/core/core#2900

  • We (a SaaS provider) are working on a rebuild of our admin UI for our users, also using web components and Cognito / Amplify, and 1password isn't working with our login, which … is … painful. I'm sure it'll drive our users absolutely mad if they can't use 1p to login.

    We may try to trick 1p with hidden inputs (which we've had to do for Safari's autocompletion functionality over the years, in a different context). Is there any official documentation or recommendations beyond https://support.1password.com/compatible-website-design/ available should we attempt that?

  • ag_jarekag_jarek

    Team Member

    Hi @pangolinpuns!

    Jarek here from the browser experience team here at 1Password. It's definitely painful when 1Password's autofill is unable to function on any given page, so I feel you there! We want to create a great filling experience for your users as much as you do 🙌.

    There isn't any other official documentation beyond what we provide on that page; in general, if autofill isn't working on a site, we'd like to hear about that so we can fix it. Sites making use of shadow DOM components are a specific case we've been aware of for quite a while now that we are hoping to improve sometime in the near future; it hasn't been done yet for uninteresting reasons.

    I would say ideally we have this fixed up soon enough that it doesn't become a problem for you; failing that, you may be able to place hidden fields in the page with appropriate autocomplete attributes such that 1Password will be able to autofill them (and then you can reflect their values back into the visible fields), but that will only help when autofilling from the extension's pop-up view. In-page suggestions won't be functional. Additionally, we're trialing improvements to hidden field detection in the beta version of our extension right now that would make doing this much more tricky.

    I'll make sure we've noted your need for shadow DOM support on our issue internally.

  • adamcodesadamcodes
    edited January 13

    @ag_jarek Is there any update on this? With React, Vue, and other mainstream frameworks adding native support for web components with shadow DOM, this is becoming a bigger deal by the day.

    You could loop through elements on the page, filter the array of elements for ones that have a shadow root attached, and then run your normal DOM traversing from the shadow root.

  • ag_jarekag_jarek

    Team Member

    Hello @adamcodes!

    I'm afraid I don't have any updates to share at this time about shadow DOM support in the browser extension. I'll make sure to add your comment to our issue internally so that gets bumped as well.

    That is certainly a possible solution that would be great for us to investigate :)

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Emoji
Image
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file