Using Tippy in shadow DOM

https://codepen.io/anon/pen/ErExqd

Since scripts can access my shadow DOM but styles can’t, I tried to inline the Tippy CSS within the shadow DOM and link Popper’s and Tippy’s JS outside. I need the CSS to be scoped so I have the following constraint:

<style>
    :host {
      all: initial; /* 1st rule so subsequent properties are reset. */
      display: block;
      contain: content; /* Boom. CSS containment FTW. */
      /* any other CSS, so this is where I inlined the Tippy's */
    }
</style>

[skrivanos]

@atomiks Just had an issue implementing a custom element for Tippy in a Polymer 3 project (using ShadowDOM). Turns out the error lies here. Hacking it by setting isVirtual to true on the target element works, but I’m not sure if this has any other side effects. Please consider allowing us to either disable the auto-destroy or specify a different root element to search in.

[atomiks]

The next statement also seems fishy to me, since I can see plenty of cases where you do want a tooltip for disabled elements. For instance to show a “You need Premium to click this”-text. But I’ll create a separate issue for that.

This statement is because different browsers handle disabled elements differently. In Firefox I think it works, but not Chrome. So standardizing disabling it makes sense. It’s recommended to use a wrapper node instead.

Edit: you may want to log a warning in those cases informing them of the potential memory leak?

I kind of want to overhaul the setup to allow for DEV-only warnings, and a development build. Like React. That way the production/minified version doesn’t have any warnings. There are tons of places I’d like to add some warnings but didn’t because I didn’t want to bloat the bundle size