tagify icon indicating copy to clipboard operation
tagify copied to clipboard

appendTarget hiding/selecting issues for shadowdom

Open lublak opened this issue 1 year ago • 4 comments

Prerequisites

  • [x] I am running the latest version
  • [x] I checked the documentation and found no answer
  • [x] I checked to make sure that this issue has not already been filed

💥 Demo Page

I can do it in some days, i need some time to build a simple lit element for this.

Explanation

  • What is the expected behavior?

There are a lot of document.body checks in the code which doesn't work in shadowdom. It should be the appendTarget element:

https://github.com/yairEO/tagify/blob/master/src/parts/dropdown.js#L155 https://github.com/yairEO/tagify/blob/master/src/parts/dropdown.js#L218

  • What is happening instead?

Checking in the document.body instead of appendTarget

  • What error message are you getting?

A lot of glitches.

lublak avatar Oct 17 '24 12:10 lublak

I think to support shadow dom, we need an option for "document". There is a lot of "document". For usage in a shadow it sould be the current shadowroot.

// default:
new Tagify(
/* ...., */
{
  root: document
}
)

new Tagify(
/* ...., */
{
  root: this.shadowRoot
}
)

lublak avatar Oct 22 '24 10:10 lublak

what do you need shadowdom for?

yairEO avatar Oct 23 '24 09:10 yairEO

@yairEO I mostly use web components to develop internal applications. To use tagify In a custom web component. It should not depend on document.body. (it doesn't work with document.body.contains).

lublak avatar Oct 24 '24 16:10 lublak

Can/will you make a pull-request?

yairEO avatar Oct 25 '24 10:10 yairEO