[feature] Added property to toggle ShadowDom in all, or per component (#85)

* Added ability to disable ShadowDOM on a per component basis

* Updated order of property check to base first, then self

* Added fallback styles when disabling shadow dom

* Last Commit for Ben!

* prettier write

Author: benotter

docs/style.md

@@ -1,6 +1,6 @@
 ---
-title: "Styling the Microsoft Graph Toolkit"
-description: "Use CSS custom properties to modify the component styles"
+title: 'Styling the Microsoft Graph Toolkit'
+description: 'Use CSS custom properties to modify the component styles'
 localization_priority: Normal
 author: nmetulev
 ---
@@ -19,4 +19,22 @@ mgt-person {
 
 It is not possible to style internal elements of a component unless a CSS custom property is provided. The component children elements are hosted in a [shadow dom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
 
-For more flexibility, consider using [custom templates](./templates.md).
+For more flexibility, consider using [custom templates](./templates.md).
+
+## Addendum:
+
+( Experimental! )
+
+It is now possible to disable the Shadow Dom, and directly style internal elements using normal browser stylesheets, by setting the static property 'useShadowDom' of the MgtBaseComponent class to false before using any MGT Tags:
+
+Example:
+
+```html
+<script type="module">
+  import { MgtBaseComponent } from './dist/es6/components/baseComponent.js';
+
+  MgtBaseComponent.useShadowDom = false;
+</script>
+
+<script type="module" src="./dist/es6/components/mgt-tasks/mgt-tasks.js"></script>
+````

src/bundle/index.es6.ts

@@ -6,6 +6,7 @@
  */
 
 export * from '../index';
+export * from '../components/baseComponent';
 export * from '../components/providers/providers';
 export * from '../providers/providers';
 export * from '../mock/mgt-mock-provider';

src/components/baseComponent.ts

@@ -16,4 +16,25 @@ export abstract class MgtBaseComponent extends LitElement {
     });
     return this.dispatchEvent(event);
   }
+
+  private static _useShadowRoot: boolean = true;
+  public static get useShadowRoot() {
+    return this._useShadowRoot;
+  }
+  public static set useShadowRoot(value: boolean) {
+    this._useShadowRoot = value;
+  }
+
+  constructor() {
+    super();
+    if (this.isShadowRootDisabled()) this['_needsShimAdoptedStyleSheets'] = true;
+  }
+
+  protected createRenderRoot() {
+    return this.isShadowRootDisabled() ? this : super.createRenderRoot();
+  }
+
+  public isShadowRootDisabled() {
+    return !MgtBaseComponent._useShadowRoot || !(this.constructor as typeof MgtBaseComponent)._useShadowRoot;
+  }
 }

src/components/mgt-agenda/mgt-agenda.scss

@@ -8,18 +8,21 @@
 @import '../../../node_modules/office-ui-fabric-core/dist/sass/References';
 @import '../../styles/shared-styles.scss';
 
-.header {
+:host .header,
+mgt-agenda .header {
   margin: var(--agenda-header-margin, 40px 10px 14px 10px);
   font-family: var(--default-font-family);
   font-size: var(--agenda-header-font-size, 24px);
   color: var(--agenda-header-color, #333333);
 }
 
-.agenda > .group:first-child > .header {
+:host .agenda > .group:first-child > .header,
+mgt-agenda .agenda > .group:first-child > .header {
   margin-top: 0;
 }
 
-.agenda-list {
+:host .agenda-list,
+mgt-agenda .agenda-list {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -28,7 +31,8 @@
   font-weight: normal;
 }
 
-.event {
+:host .event,
+mgt-agenda .event {
   background: var(--event-background, #ffffff);
   border: var(--event-border, solid 2px rgba(0, 0, 0, 0));
   box-shadow: var(--event-box-shadow, 0px 2px 8px rgba(0, 0, 0, 0.092));
@@ -37,95 +41,113 @@
   display: flex;
 }
 
-.narrow .event {
+:host .narrow .event,
+mgt-agenda .narrow .event {
   flex-direction: column;
 }
 
-.event-time-container {
+:host .event-time-container,
+mgt-agenda .event-time-container {
   display: flex;
   flex-direction: column;
   margin: 18px 38px 18px 18px;
   width: 120px;
 }
 
-.narrow .event-time-container {
+:host .narrow .event-time-container,
+mgt-agenda .narrow .event-time-container {
   margin: 14px 18px 8px 18px;
 }
 
-.event-time {
+:host .event-time,
+mgt-agenda .event-time {
   font-size: var(--event-time-font-size, 12px);
   color: var(--event-time-color, #000000);
   font-weight: 600;
 }
 
-.event-duration {
+:host .event-duration,
+mgt-agenda .event-duration {
   color: rgba(16, 16, 16, 0.3);
 }
 
-.event-details-container {
+:host .event-details-container,
+mgt-agenda .event-details-container {
   margin: 14px 18px 14px 0px;
 }
 
-.narrow .event-details-container {
+:host .narrow .event-details-container,
+mgt-agenda .narrow .event-details-container {
   margin: 0px 18px 14px 18px;
 }
 
-.event-subject {
+:host .event-subject,
+mgt-agenda .event-subject {
   margin: 0px 18px 0px 0px;
   font-size: var(--event-subject-font-size, 19px);
   color: var(--event-subject-color, #333333);
 }
 
-.event-location-container {
+:host .event-location-container,
+mgt-agenda .event-location-container {
   display: flex;
   margin: 8px 18px 0px 0px;
 }
 
-.event-location {
+:host .event-location,
+mgt-agenda .event-location {
   font-size: var(--event-location-font-size, 12px);
   color: var(--event-location-color, #000000);
   margin: 0px 0px 0px 4px;
 }
 
-.event-attendees {
+:host .event-attendees,
+mgt-agenda .event-attendees {
   --list-margin: 8px 0 0 0;
   --avatar-size-s: 20px;
 }
 
-.event-other-container {
+:host .event-other-container,
+mgt-agenda .event-other-container {
   margin: 2px 16px 4px 16px;
   margin-left: auto;
 }
 
 // loading style
 
-.loading-element {
+:host .loading-element,
+mgt-agenda .loading-element {
   background: #f2f2f2;
   border-radius: 1px;
 }
 
-.event-time-loading {
+:host .event-time-loading,
+mgt-agenda .event-time-loading {
   width: 100px;
   height: 10px;
 }
 
-.event-subject-loading {
+:host .event-subject-loading,
+mgt-agenda .event-subject-loading {
   width: 263px;
   height: 16px;
 }
 
-.event-location-icon-loading {
+:host .event-location-icon-loading,
+mgt-agenda .event-location-icon-loading {
   width: 14px;
   height: 14px;
 }
 
-.event-location-loading {
+:host .event-location-loading,
+mgt-agenda .event-location-loading {
   width: 90px;
   height: 10px;
   margin: 2px 0px 0px 4px;
 }
 
-.event-attendee-loading {
+:host .event-attendee-loading,
+mgt-agenda .event-attendee-loading {
   width: 20px;
   height: 20px;
   border-radius: 10px;

src/components/mgt-login/mgt-login.scss

@@ -8,7 +8,8 @@
 @import '../../../node_modules/office-ui-fabric-core/dist/sass/References';
 @import '../../styles/shared-styles.scss';
 
-:host {
+:host,
+mgt-login {
   --font-size: #{$ms-font-size-m};
   --font-weight: #{$ms-font-weight-semibold};
   --height: '100%';
@@ -21,12 +22,14 @@
   --popup-command-font-size: #{$ms-font-size-s};
 }
 
-.root {
+:host .root,
+mgt-login .root {
   position: relative;
   display: inline-block;
 }
 
-.login-button {
+:host .login-button,
+mgt-login .login-button {
   display: flex;
   align-items: center;
   font-family: var(--default-font-family);
@@ -56,13 +59,15 @@
   }
 }
 
-.login-icon {
+:host .login-icon,
+mgt-login .login-icon {
   & + span {
     margin-left: 6px;
   }
 }
 
-.popup {
+:host .popup,
+mgt-login .popup {
   display: none;
   position: absolute;
   animation-duration: 300ms;
@@ -82,19 +87,22 @@
   }
 }
 
-.popup-content {
+:host .popup-content,
+mgt-login .popup-content {
   display: flex;
   flex-direction: column;
   padding: 24px 48px 16px 24px;
 }
 
-.popup-commands ul {
+:host .popup-commands ul,
+mgt-login .popup-commands ul {
   list-style-type: none;
   margin: 16px 0 0;
   padding: 0;
 }
 
-.popup-command {
+:host .popup-command,
+mgt-login .popup-command {
   font-family: var(--default-font-family);
   font-size: var(--popup-command-font-size);
   font-weight: var(--font-weight);

src/components/mgt-login/mgt-login.ts

@@ -5,19 +5,20 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { LitElement, html, customElement, property } from 'lit-element';
+import { html, customElement, property } from 'lit-element';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
+import { MgtBaseComponent } from '../baseComponent';
 import { styles } from './mgt-login-css';
 
 import { MgtPersonDetails } from '../mgt-person/mgt-person';
 import '../mgt-person/mgt-person';
 import '../../styles/fabric-icon-font';
 
 @customElement('mgt-login')
-export class MgtLogin extends LitElement {
+export class MgtLogin extends MgtBaseComponent {
   private _loginButtonRect: ClientRect;
   private _popupRect: ClientRect;
   private _openLeft: boolean = false;
@@ -42,18 +43,10 @@ export class MgtLogin extends LitElement {
     this.loadState();
   }
 
-  private fireCustomEvent(eventName: string): boolean {
-    let event = new CustomEvent(eventName, {
-      cancelable: true,
-      bubbles: false
-    });
-    return this.dispatchEvent(event);
-  }
-
   updated(changedProps) {
     if (changedProps.get('_showMenu') === false) {
       // get popup bounds
-      const popup = this.shadowRoot.querySelector('.popup');
+      const popup = this.renderRoot.querySelector('.popup');
       if (popup && popup.animate) {
         this._popupRect = popup.getBoundingClientRect();
 
@@ -126,16 +119,16 @@ export class MgtLogin extends LitElement {
   }
 
   firstUpdated() {
-    window.onclick = (event: any) => {
+    window.addEventListener('click', (event: MouseEvent) => {
       if (event.target !== this) {
         // get popup bounds
-        const popup = this.shadowRoot.querySelector('.popup');
+        const popup = this.renderRoot.querySelector('.popup');
         if (popup) {
           this._popupRect = popup.getBoundingClientRect();
           this._showMenu = false;
         }
       }
-    };
+    });
   }
 
   private async loadState() {
@@ -160,10 +153,11 @@ export class MgtLogin extends LitElement {
     this._loading = false;
   }
 
-  private onClick() {
+  private onClick(e: MouseEvent) {
+    e.stopPropagation();
     if (this._user || this.userDetails) {
       // get login button bounds
-      const loginButton = this.shadowRoot.querySelector('.login-button');
+      const loginButton = this.renderRoot.querySelector('.login-button');
       if (loginButton) {
         this._loginButtonRect = loginButton.getBoundingClientRect();