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>

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"
+}

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 {}
 

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 {

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' })

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 {

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'> {

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 {}
 

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

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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 {}
 

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/';

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 {}
 

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 {}
 

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 {
   /**

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 {

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 {}
 

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 {}