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 00000000000000..ff2a2cf9eb5943
--- /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 acbc945f5118f1..6e9ebe4e359fa9 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 dfedfa9995eda3..033fd9f5ff68ef 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 61829b68f1f221..51f6bf9594fa09 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 f39e82d6cd8ccc..f22cb16ddf12a8 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 c2dbb7a426dd32..9a50c04ae0dfcf 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 f28032f04df77d..ec1ceb8471fc10 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 7ffe7c524128e6..e1eeb008e63451 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 8e40d9f35d98dc..856406e9d015be 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 c3dff67fc6707b..0c0b0348d946c0 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 b8f43daad76a86..cd36e7da6462a7 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 bce366f8be308b..16d3d001efe803 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 f69e7e8c04685e..3f0e48e8294bc6 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 b19118a9365777..7a4c5793712ba0 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 feac425966c499..c245cd8ef1b688 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 8037da367cb2f3..16287d380413d6 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 82fbed221fdc38..6473c7cd7a0ec7 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 824a527a6ab939..c4788221a253c1 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 6a6a1aa2a05e85..b9efbb51a1bb85 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 48d08fb570b142..f914929a72754b 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 25ed93ead0abf9..0d51ff74bfe0f8 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 c4c56c2f56143f..11b8f46cc43f09 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 2952168555ac55..4f4a2a4ea429a4 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 4fb01d4f595616..ff44f410fa48d5 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 50ebc51cf7c0c6..0e87d77f4f8db4 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 a2bb1b8277cfa4..d4d908c7e5cf28 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 7ada2edec82eb0..0b292349b91557 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 {}