Alternate way to render UI for login buttons? Using web component

Robert_Keleher

I'm trying to develop a reusable code snippet that uses OneAll social login within a web component. Web components are tricky to deal with due to their encapsulation of code within a shadow DOM, which separates the scope of some elements from the rest of the parent page that contains the web component.

I’m wondering if there is another way to get the UI elements of social login to show up other than using do_render_ui in the async queue? ****do_render_ui**** isn’t working for me because that process takes the ID of an element to search for in the (light) DOM, but the OneAll code cannot see my element because it is in the shadow DOM.. and so I can't get the login buttons to show.

Furthermore, is there a way to use the OneAll plugin without having to set up the async queue as a global variable in the document? Doing that from my web component “pollutes” the parent site code with a global variable that is only relevant to my componentized code. Thanks

Damien_ZARA

Hi Robert,

The best would be to create your own buttons using for example an tag. Then when someone is clicking on them, just fire a do_login method (http://docs.oneall.com/api/javascript/library/methods/social-login/#do_login) and get the result with on_login_end (http://docs.oneall.com/api/javascript/library/events/#on_login_end).

Best regards,
Damien