yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.55k stars 436 forks source link

appendTarget hiding/selecting issues for shadowdom #1390

Open lublak opened 1 month ago

lublak commented 1 month ago

Prerequisites

💥 Demo Page

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

Explanation

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

Checking in the document.body instead of appendTarget

A lot of glitches.

lublak commented 1 month ago

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
}
)
yairEO commented 1 month ago

what do you need shadowdom for?

lublak commented 4 weeks ago

@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).

yairEO commented 4 weeks ago

Can/will you make a pull-request?