Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding ShadowDom support. #938

Closed
wants to merge 2 commits into from

Conversation

travist
Copy link
Contributor

@travist travist commented Mar 30, 2021

Description

This change allows for this library to work within a Shadow Dom
If you have this library embedded within a shadow dom, it will not work
Fixes:

Screenshots (if appropriate)

Types of changes

This adds a new configuration where you can pass the shadowRoot as a configuration. If you this configuration, then this will work in a shadow dom like so.

var shadowRoot = document.getElementById('wrapper').attachShadow({ mode: 'open' });
var choices = new Choices({
  shadowRoot: shadowRoot
});
  • Chore (tooling change or documentation change)
  • Refactor (non-breaking change which maintains existing functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.

@no-creative-name
Copy link

What's the status of this PR @travist?

@kozi
Copy link

kozi commented Oct 20, 2022

Is there a chance that this request will be merged or what still needs to be done?

@karansantani
Copy link

I'm running into a similar issue. Trying to isolate the styles for the component using formio selector using Shadow Dom. Choices.js does not seem to work.
@travist Do you have any idea if this PR will be merged in the near future?

@DeekshithRajBasa
Copy link

Hello, @travist. I saw that the current version of Formio has modifications to the choice js within it; how do I make this work with Angular shadow DOM?
I'm stuck since I don't know how to make it work with Angular using the code you gave in the readme file.

var shadowRoot = document.getElementById('wrapper').attachShadow({ mode: 'open' });
var choices = new Choices({
  shadowRoot: shadowRoot
});

Thanks in advance.

@mariolinguito
Copy link

mariolinguito commented Jan 15, 2023

My workaround can be helpful for someone: #805

@verena-ifx
Copy link

verena-ifx commented Jun 5, 2023

is there any update on this?

Xon added a commit to Xon/Choices.js that referenced this pull request Aug 2, 2024
Choices-js#938

# Conflicts:
#	src/scripts/constants.ts
@Xon Xon mentioned this pull request Aug 6, 2024
9 tasks
@Xon
Copy link
Collaborator

Xon commented Aug 6, 2024

Thanks! Implemented as part of #1166

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants