From d0d5148cf4cdd80ae884eecc35b411a8719aa0d0 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 6 Oct 2020 10:19:30 -0700
Subject: [PATCH] feat: close shadow roots of all web components (#15382)

* close shadow roots of all web components

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...20-10-06-09-07-15-users-nirice-close-shadow-roots.json | 8 ++++++++
 packages/web-components/src/accordion/index.ts            | 3 +++
 packages/web-components/src/anchor/index.ts               | 1 +
 packages/web-components/src/badge/index.ts                | 3 +++
 packages/web-components/src/button/index.ts               | 1 +
 packages/web-components/src/card/index.ts                 | 3 +++
 packages/web-components/src/checkbox/index.ts             | 3 +++
 .../web-components/src/design-system-provider/index.ts    | 3 +++
 packages/web-components/src/dialog/index.ts               | 3 +++
 packages/web-components/src/divider/index.ts              | 3 +++
 packages/web-components/src/flipper/index.ts              | 3 +++
 packages/web-components/src/menu-item/index.ts            | 3 +++
 packages/web-components/src/menu/index.ts                 | 3 +++
 .../web-components/src/progress/progress-ring/index.ts    | 3 +++
 packages/web-components/src/progress/progress/index.ts    | 3 +++
 packages/web-components/src/radio-group/index.ts          | 3 +++
 packages/web-components/src/radio/index.ts                | 3 +++
 packages/web-components/src/slider-label/index.ts         | 3 +++
 packages/web-components/src/slider/index.ts               | 3 +++
 packages/web-components/src/switch/index.ts               | 3 +++
 packages/web-components/src/tabs/index.ts                 | 3 +++
 packages/web-components/src/tabs/tab-panel/index.ts       | 3 +++
 packages/web-components/src/tabs/tab/index.ts             | 3 +++
 packages/web-components/src/text-area/index.ts            | 3 +++
 packages/web-components/src/text-field/index.ts           | 1 +
 packages/web-components/src/tree-item/index.ts            | 3 +++
 packages/web-components/src/tree-view/index.ts            | 3 +++
 27 files changed, 80 insertions(+)
 create mode 100644 change/@fluentui-web-components-2020-10-06-09-07-15-users-nirice-close-shadow-roots.json

diff --git a/change/@fluentui-web-components-2020-10-06-09-07-15-users-nirice-close-shadow-roots.json b/change/@fluentui-web-components-2020-10-06-09-07-15-users-nirice-close-shadow-roots.json
new file mode 100644
index 0000000000000..ff2a2cf9eb594
--- /dev/null
+++ b/change/@fluentui-web-components-2020-10-06-09-07-15-users-nirice-close-shadow-roots.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "close shadow roots of all web components",
+  "packageName": "@fluentui/web-components",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-06T16:07:15.935Z"
+}
diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts
index acbc945f5118f..6e9ebe4e359fa 100644
--- a/packages/web-components/src/accordion/index.ts
+++ b/packages/web-components/src/accordion/index.ts
@@ -17,6 +17,9 @@ export * from './accordion-item/index';
   name: 'fluent-accordion',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentAccordion extends Accordion {}
 
diff --git a/packages/web-components/src/anchor/index.ts b/packages/web-components/src/anchor/index.ts
index dfedfa9995eda..033fd9f5ff68e 100644
--- a/packages/web-components/src/anchor/index.ts
+++ b/packages/web-components/src/anchor/index.ts
@@ -26,6 +26,7 @@ export type AnchorAppearance = ButtonAppearance | 'hypertext';
   styles,
   shadowOptions: {
     delegatesFocus: true,
+    mode: 'closed',
   },
 })
 export class FluentAnchor extends Anchor {
diff --git a/packages/web-components/src/badge/index.ts b/packages/web-components/src/badge/index.ts
index 61829b68f1f22..51f6bf9594fa0 100644
--- a/packages/web-components/src/badge/index.ts
+++ b/packages/web-components/src/badge/index.ts
@@ -21,6 +21,9 @@ export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string;
   name: 'fluent-badge',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentBadge extends Badge {
   @attr({ mode: 'fromView' })
diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts
index f39e82d6cd8cc..f22cb16ddf12a 100644
--- a/packages/web-components/src/button/index.ts
+++ b/packages/web-components/src/button/index.ts
@@ -25,6 +25,7 @@ export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline'
   styles,
   shadowOptions: {
     delegatesFocus: true,
+    mode: 'closed',
   },
 })
 export class FluentButton extends Button {
diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
index c2dbb7a426dd3..9a50c04ae0dfc 100644
--- a/packages/web-components/src/card/index.ts
+++ b/packages/web-components/src/card/index.ts
@@ -18,6 +18,9 @@ import { CardStyles as styles } from './card.styles';
   name: 'fluent-card',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentCard extends FluentDesignSystemProvider
   implements Pick<DesignSystem, 'backgroundColor' | 'neutralPalette'> {
diff --git a/packages/web-components/src/checkbox/index.ts b/packages/web-components/src/checkbox/index.ts
index f28032f04df77..ec1ceb8471fc1 100644
--- a/packages/web-components/src/checkbox/index.ts
+++ b/packages/web-components/src/checkbox/index.ts
@@ -15,6 +15,9 @@ import { CheckboxStyles as styles } from './checkbox.styles';
   name: 'fluent-checkbox',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentCheckbox extends Checkbox {}
 
diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts
index 7ffe7c524128e..e1eeb008e6345 100644
--- a/packages/web-components/src/design-system-provider/index.ts
+++ b/packages/web-components/src/design-system-provider/index.ts
@@ -41,6 +41,9 @@ const backgroundStyles = css`
   name: 'fluent-design-system-provider',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentDesignSystemProvider extends DesignSystemProvider
   implements
diff --git a/packages/web-components/src/dialog/index.ts b/packages/web-components/src/dialog/index.ts
index 8e40d9f35d98d..856406e9d015b 100644
--- a/packages/web-components/src/dialog/index.ts
+++ b/packages/web-components/src/dialog/index.ts
@@ -15,6 +15,9 @@ import { DialogStyles as styles } from './dialog.styles';
   name: 'fluent-dialog',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentDialog extends Dialog {}
 
diff --git a/packages/web-components/src/divider/index.ts b/packages/web-components/src/divider/index.ts
index c3dff67fc6707..0c0b0348d946c 100644
--- a/packages/web-components/src/divider/index.ts
+++ b/packages/web-components/src/divider/index.ts
@@ -15,6 +15,9 @@ import { DividerStyles as styles } from './divider.styles';
   name: 'fluent-divider',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentDivider extends Divider {}
 
diff --git a/packages/web-components/src/flipper/index.ts b/packages/web-components/src/flipper/index.ts
index b8f43daad76a8..cd36e7da6462a 100644
--- a/packages/web-components/src/flipper/index.ts
+++ b/packages/web-components/src/flipper/index.ts
@@ -15,6 +15,9 @@ import { FlipperStyles as styles } from './flipper.styles';
   name: 'fluent-flipper',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentFlipper extends Flipper {}
 
diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts
index bce366f8be308..16d3d001efe80 100644
--- a/packages/web-components/src/menu-item/index.ts
+++ b/packages/web-components/src/menu-item/index.ts
@@ -15,6 +15,9 @@ import { MenuItemStyles as styles } from './menu-item.styles';
   name: 'fluent-menu-item',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentMenuItem extends MenuItem {}
 
diff --git a/packages/web-components/src/menu/index.ts b/packages/web-components/src/menu/index.ts
index f69e7e8c04685..3f0e48e8294bc 100644
--- a/packages/web-components/src/menu/index.ts
+++ b/packages/web-components/src/menu/index.ts
@@ -15,6 +15,9 @@ import { MenuStyles as styles } from './menu.styles';
   name: 'fluent-menu',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentMenu extends Menu {}
 
diff --git a/packages/web-components/src/progress/progress-ring/index.ts b/packages/web-components/src/progress/progress-ring/index.ts
index b19118a936577..7a4c5793712ba 100644
--- a/packages/web-components/src/progress/progress-ring/index.ts
+++ b/packages/web-components/src/progress/progress-ring/index.ts
@@ -15,6 +15,9 @@ import { ProgressRingStyles as styles } from './progress-ring.styles';
   name: 'fluent-progress-ring',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentProgressRing extends BaseProgress {}
 
diff --git a/packages/web-components/src/progress/progress/index.ts b/packages/web-components/src/progress/progress/index.ts
index feac425966c49..c245cd8ef1b68 100644
--- a/packages/web-components/src/progress/progress/index.ts
+++ b/packages/web-components/src/progress/progress/index.ts
@@ -15,6 +15,9 @@ import { ProgressStyles as styles } from './progress.styles';
   name: 'fluent-progress',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentProgress extends BaseProgress {}
 
diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index 8037da367cb2f..16287d380413d 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -15,6 +15,9 @@ import { RadioGroupStyles as styles } from './radio-group.styles';
   name: 'fluent-radio-group',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentRadioGroup extends RadioGroup {}
 
diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts
index 82fbed221fdc3..6473c7cd7a0ec 100644
--- a/packages/web-components/src/radio/index.ts
+++ b/packages/web-components/src/radio/index.ts
@@ -15,6 +15,9 @@ import { RadioStyles as styles } from './radio.styles';
   name: 'fluent-radio',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentRadio extends Radio {}
 
diff --git a/packages/web-components/src/slider-label/index.ts b/packages/web-components/src/slider-label/index.ts
index 824a527a6ab93..c4788221a253c 100644
--- a/packages/web-components/src/slider-label/index.ts
+++ b/packages/web-components/src/slider-label/index.ts
@@ -15,6 +15,9 @@ import { SliderLabelStyles as styles } from './slider-label.styles';
   name: 'fluent-slider-label',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentSliderLabel extends SliderLabel {}
 
diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts
index 6a6a1aa2a05e8..b9efbb51a1bb8 100644
--- a/packages/web-components/src/slider/index.ts
+++ b/packages/web-components/src/slider/index.ts
@@ -15,6 +15,9 @@ import { SliderStyles as styles } from './slider.styles';
   name: 'fluent-slider',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentSlider extends Slider {}
 
diff --git a/packages/web-components/src/switch/index.ts b/packages/web-components/src/switch/index.ts
index 48d08fb570b14..f914929a72754 100644
--- a/packages/web-components/src/switch/index.ts
+++ b/packages/web-components/src/switch/index.ts
@@ -15,6 +15,9 @@ import { SwitchStyles as styles } from './switch.styles';
   name: 'fluent-switch',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentSwitch extends Switch {}
 
diff --git a/packages/web-components/src/tabs/index.ts b/packages/web-components/src/tabs/index.ts
index 25ed93ead0abf..0d51ff74bfe0f 100644
--- a/packages/web-components/src/tabs/index.ts
+++ b/packages/web-components/src/tabs/index.ts
@@ -15,6 +15,9 @@ import { TabsStyles as styles } from './tabs.styles';
   name: 'fluent-tabs',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentTabs extends Tabs {}
 export * from './tab/';
diff --git a/packages/web-components/src/tabs/tab-panel/index.ts b/packages/web-components/src/tabs/tab-panel/index.ts
index c4c56c2f56143..11b8f46cc43f0 100644
--- a/packages/web-components/src/tabs/tab-panel/index.ts
+++ b/packages/web-components/src/tabs/tab-panel/index.ts
@@ -15,6 +15,9 @@ import { TabPanelStyles as styles } from './tab-panel.styles';
   name: 'fluent-tab-panel',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentTabPanel extends TabPanel {}
 
diff --git a/packages/web-components/src/tabs/tab/index.ts b/packages/web-components/src/tabs/tab/index.ts
index 2952168555ac5..4f4a2a4ea429a 100644
--- a/packages/web-components/src/tabs/tab/index.ts
+++ b/packages/web-components/src/tabs/tab/index.ts
@@ -15,6 +15,9 @@ import { TabStyles as styles } from './tab.styles';
   name: 'fluent-tab',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentTab extends Tab {}
 
diff --git a/packages/web-components/src/text-area/index.ts b/packages/web-components/src/text-area/index.ts
index 4fb01d4f59561..ff44f410fa48d 100644
--- a/packages/web-components/src/text-area/index.ts
+++ b/packages/web-components/src/text-area/index.ts
@@ -23,6 +23,9 @@ export type TextAreaAppearance = 'filled' | 'outline';
   name: 'fluent-text-area',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentTextArea extends TextArea {
   /**
diff --git a/packages/web-components/src/text-field/index.ts b/packages/web-components/src/text-field/index.ts
index 50ebc51cf7c0c..0e87d77f4f8db 100644
--- a/packages/web-components/src/text-field/index.ts
+++ b/packages/web-components/src/text-field/index.ts
@@ -25,6 +25,7 @@ export type TextFieldAppearance = 'filled' | 'outline';
   styles,
   shadowOptions: {
     delegatesFocus: true,
+    mode: 'closed',
   },
 })
 export class FluentTextField extends TextField {
diff --git a/packages/web-components/src/tree-item/index.ts b/packages/web-components/src/tree-item/index.ts
index a2bb1b8277cfa..d4d908c7e5cf2 100644
--- a/packages/web-components/src/tree-item/index.ts
+++ b/packages/web-components/src/tree-item/index.ts
@@ -15,6 +15,9 @@ import { TreeItemStyles as styles } from './tree-item.styles';
   name: 'fluent-tree-item',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentTreeItem extends TreeItem {}
 
diff --git a/packages/web-components/src/tree-view/index.ts b/packages/web-components/src/tree-view/index.ts
index 7ada2edec82eb..0b292349b9155 100644
--- a/packages/web-components/src/tree-view/index.ts
+++ b/packages/web-components/src/tree-view/index.ts
@@ -15,6 +15,9 @@ import { TreeViewStyles as styles } from './tree-view.styles';
   name: 'fluent-tree-view',
   template,
   styles,
+  shadowOptions: {
+    mode: 'closed',
+  },
 })
 export class FluentTreeView extends TreeView {}