Enable shadow dom

.gitignore

@@ -23,3 +23,5 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 .env
+
+package-lock.json

README.md

@@ -23,9 +23,9 @@ npm install --save split-me
 
 Import `SplitMe` in your `index.js`:
 ```js
-import { defineCustomElements } from 'split-me';
+import * as SplitMe from 'split-me';
 
-defineCustomElements(window);
+SplitMe.defineCustomElements(window);
 ```
 
 ## Basic Usage
@@ -79,7 +79,7 @@ Splitters can be arbitrarily nested into each other to achieve any layout.
 This is the list of variables and their default values:
 
 ```css
-split-me {
+:host {
   --divider-length: 100%; /* Length of the divider along the principal axis */
   --divider-thickness: 0.15rem; /* Thickness of the divider */
   --divider-color: #eeeeee; /* Background color of the divider */
@@ -101,7 +101,7 @@ For example, to make the dividers thicker and change their color to yellow:
 </split-me>
 
 <style>
-  split-me {
+  :root split-me {
     --divider-thickness: 0.75rem;
     --divider-color: yellow;
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "split-me",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Universal web component to create arbitrary split layouts ",
   "module": "dist/esm/index.js",
   "main": "dist/index.js",

src/components.d.ts

@@ -1,69 +1,52 @@
 /**
- * This is an autogenerated file created by the Stencil compiler.
- * It contains typing information for all components that exist in this project.
- */
+* This is an autogenerated file created by the Stencil compiler.
+* It contains typing information for all components that exist in this project.
+*/
 /* tslint:disable */
 
 import '@stencil/core';
 
 
 
 
-declare global {
-  interface HTMLElement {
-    componentOnReady?: () => Promise<this | null>;
-  }
-
-  interface HTMLStencilElement extends HTMLElement {
-    componentOnReady(): Promise<this>;
+export namespace Components {
 
-    forceUpdate(): void;
+  interface SplitMe {
+    'd': 'horizontal' | 'vertical';
+    'fixed': boolean;
+    'maxSizes': string;
+    'minSizes': string;
+    'n': number;
+    'sizes': string;
+    'throttle': number;
   }
-
-  interface HTMLAttributes {}
-
-  namespace StencilComponents {
-
-    interface SplitMe {
-      'd': 'horizontal' | 'vertical';
-      'fixed': boolean;
-      'maxSizes': string;
-      'minSizes': string;
-      'n': number;
-      'sizes': string;
-      'throttle': number;
-    }
+  interface SplitMeAttributes extends StencilHTMLAttributes {
+    'd'?: 'horizontal' | 'vertical';
+    'fixed'?: boolean;
+    'maxSizes'?: string;
+    'minSizes'?: string;
+    'n'?: number;
+    'onSlotResized'?: (event: CustomEvent) => void;
+    'sizes'?: string;
+    'throttle'?: number;
   }
+}
 
+declare global {
+  interface StencilElementInterfaces {
+    'SplitMe': Components.SplitMe;
+  }
 
-    interface HTMLSplitMeElement extends StencilComponents.SplitMe, HTMLStencilElement {}
-
-    var HTMLSplitMeElement: {
-      prototype: HTMLSplitMeElement;
-      new (): HTMLSplitMeElement;
-    };
-
-
-  namespace JSX {
-    interface Element {}
-    export interface IntrinsicElements {
-    'split-me': JSXElements.SplitMeAttributes;
-    }
+  interface StencilIntrinsicElements {
+    'split-me': Components.SplitMeAttributes;
   }
 
-  namespace JSXElements {
 
-    export interface SplitMeAttributes extends HTMLAttributes {
-      'd'?: 'horizontal' | 'vertical';
-      'fixed'?: boolean;
-      'maxSizes'?: string;
-      'minSizes'?: string;
-      'n'?: number;
-      'onSlotResized'?: (event: CustomEvent) => void;
-      'sizes'?: string;
-      'throttle'?: number;
-    }
-  }
+  interface HTMLSplitMeElement extends Components.SplitMe, HTMLStencilElement {}
+  var HTMLSplitMeElement: {
+    prototype: HTMLSplitMeElement;
+    new (): HTMLSplitMeElement;
+  };
 
   interface HTMLElementTagNameMap {
     'split-me': HTMLSplitMeElement
@@ -72,7 +55,14 @@ declare global {
   interface ElementTagNameMap {
     'split-me': HTMLSplitMeElement;
   }
-}
-declare global { namespace JSX { interface StencilJSX {} } }
 
-export declare function defineCustomElements(window: any): void;
+
+  export namespace JSX {
+    export interface Element {}
+    export interface IntrinsicElements extends StencilIntrinsicElements {
+      [tagName: string]: any;
+    }
+  }
+  export interface HTMLAttributes extends StencilHTMLAttributes {}
+
+}

src/components/split-me/split-me.css

@@ -1,17 +1,4 @@
-/* Shadow DOM disabled until supported by Firefox
 :host {
-  --divider-length: 100%;
-  --divider-thickness: 0.15rem;
-  --divider-color: #eeeeee;
-  --divider-shadow: 0 0 0.3rem black;
-  --divider-image-h: none;
-  --divider-image-v: none;
-  --divider-background-repeat: no-repeat;
-  --divider-background-position: center;
-}
-*/
-
-split-me {
   --divider-length: 100%; /* Length of the divider along the principal axis */
   --divider-thickness: 0.15rem; /* Thickness of the divider */
   --divider-color: #eeeeee; /* Background color of the divider */

src/components/split-me/split-me.tsx

@@ -6,7 +6,7 @@ import throttle from 'lodash.throttle';
 @Component({
   tag: 'split-me',
   styleUrl: 'split-me.css',
-  shadow: false
+  shadow: true
 })
 export class SplitMe {
 

src/index.html

@@ -49,7 +49,7 @@
     width: 100%;
   }
 
-  split-me {
+  :root split-me {
     --divider-thickness: 0.75rem;
     --divider-color: yellow;
   }