Base support for web components

[xdev1]

First, many thanks for this great project.
vanillajs-datepicker is remarkably flexible, but you currently cannot really use it with custom elements in shadow DOM.
There are two showstoppers:

1. Option container should not only allow a string vaue but also an HTMLElement instance (as document.querySelector will not find elements in the shadow DOM).

   These lines here:
   

   vanillajs-datepicker/js/Datepicker.js

   Lines 156 to 159 in 4843b2f

   	const container = options.container ? document.querySelector(options.container) : null;
   	if (container) {
   	config.container = container;
   	}

   
   could be replaced by:

   const container =
       options.container instanceof window.HTMLElement
         ? options.container
         : typeof options.container === 'string'
         ? document.querySelector(options.container)
         : null;
   
     if (container) {
       config.container = container;
     }

2. document.activeElement is not working if a corresponding input element is in shadow DOM. See:
   

   vanillajs-datepicker/js/events/otherListeners.js

   Lines 7 to 9 in 4843b2f

   	if (element !== document.activeElement) {
   	return;
   	}

   Couldn't that just be replaced with the following?

   if (!datepicker.active) {
     return;
   }

Would be extremely great if these two issues could be fixed. Let me know if I shall prepare a PR. TYVMIA.

[xdev1]

@mymth May I ask, whether you already know when the next version of vanillajs-datepicker will be released. Frankly, the above mentioned little issues are complete showstopper for the date selectors in my project currently (and everyone else who might use vanillajs-datepicker in custom elements). Forking just because of minor issues would not make sense at all and all other date pickers I've checked are not as flexible as this one, so using vanillajs-datepicker is currently my only option. At least a very soon beta release including the above mentioned changes (see PR #84) would be really, really helpful. TYVMIA.

[mymth]

I don't have fixed date yet, but am aiming to get it done by the holidays. Releasing beta version is a good idea. I'll consider it.
Thank you for the PR and suggestion.

[xdev1]

@mymth Many thanks for the merge.
Regarding the "beta relase":
I've seen the other day, that yarn add github:mymth/vanillajs-datepicker will work with vanillajs-datepicker out of the box (many thanks to @brianzinn for that hint in some other issue), so I personally do not need a "beta release" any longer. Thanks.

[xdev1]

@mymth FYI: I've overlooked two other places which should be changed.
There are two further checks whether an input element is focused or not.
Instead of something like inputElement === document.activeElement (which is not working for input elements in shadow DOM) we should use inputElement.matches(':focus') instead.

Only the two places in inputFieldListeners.js and Datepicker.js are important (the unit tests can stay as is):
https://github.com/mymth/vanillajs-datepicker/search?q=document.activeElement

I'll prepare a further PR as soon as #91 is merged.

[mymth]

Haven't pushed yet, but I already changed it as I found a bug from your change (It's nitpicking level, though—updating on blur didn't work when the picker is hidden by ESC key press) and its fix and the change were related.

I did it with adding a function that evaluates el.getRootNode().activeElement === el instead of matches(':focus'). I'm not sure which is actually better. If you have a clear answer, please let me know.

By the way, I’ll probably postpone merging #91 until after the next release in order to focus on making other changes planed earlier available as soon as possible. (I merged this issue because it's related to one of them).

So you don’t need to PR. Thank you tough for the offer.

[mymth]

I'll close this as this was resolved by v1.2.0 release.