Skip to content

[FEATURE] Support encapsulation within Shadow DOM #381

@niklaushug

Description

@niklaushug

Feature description

  1. Append calendar to Shadow DOM if needed.
  2. Do not hide calendar if calendar or input (if inputMode: true) is clicked.

Use case
We think vanilla-calendar-pro is a great fit for our Lit-based design system. All our components are encapsulated in custom elements and use Shadow DOM.

Proposed solution
Features 1 and 2 are addressed in my Fork.

Consideration
To check if more code has to be changed to support Shadow DOM I searched for 'document':

  1. Method queryAndMemoize should query its RootNode if needed. Only querying 'document' may fail. The method name seems to have a typo (missing 'r').
  2. May you want execute the conditionals on line 35 and 36 only if the calendar resides inside a Shadow DOM.

Sample
Commit Add webcomponent sample. shows a minimalistic web component with a calendar. May toggle settings inputMode.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions