update DSP to use dom.supportsAdoptedStyleSheets (microsoft#4758)

* update to use dom.supportsAdoptedStyleSheets

* change

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

change/@microsoft-fast-foundation-62fde272-7a56-4e1b-93b2-d5ed5c1083bf.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update to Design System Provider to use dom.supportsAdoptedStyleSheets",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/design-system-provider/design-system-provider.ts

@@ -2,6 +2,7 @@ import {
     attr,
     Behavior,
     customElement,
+    DOM,
     FASTElement,
     observable,
     Observable,
@@ -20,8 +21,6 @@ import {
 import { composedParent } from "../utilities/composed-parent";
 import type { DecoratorDesignSystemPropertyConfiguration } from "./design-system-property";
 
-const supportsAdoptedStylesheets = "adoptedStyleSheets" in window.ShadowRoot.prototype;
-
 /**
  * Defines a structure that consumes from a DesignSystemProvider
  * @public
@@ -362,7 +361,7 @@ export class DesignSystemProvider extends FASTElement
         // to give authors opportunity to assign an initial value. In cases where adoptedStyleSheets are *un-supported*, the
         // property is assigned in the constructor to ensure the DesignSystemProvider initializes the property. The change handler
         // will then prevent any future assignment.
-        if (!supportsAdoptedStylesheets) {
+        if (!DOM.supportsAdoptedStyleSheets) {
             this.customPropertyManager = new StyleElementCustomPropertyManager(
                 document.createElement("style"),
                 this

sites/website/src/docs/design-systems/creating-a-design-system.md

@@ -130,6 +130,8 @@ Cards are a popular UI pattern but pose an interesting problem because they ofte
 To address this, the [DesignSystemProvider](/docs/api/fast-foundation.designsystemprovider) exposes a [customPropertyManager](/docs/api/fast-foundation.designsystemprovider.custompropertymanager) property that can be assigned a [ConstructableStylesCustomPropertyManager](/docs/api/fast-foundation.constructablestylescustompropertymanager). This manager instance can be shared between like-provider instances, avoiding duplicate registration and evaluation of CSS custom properties.
 
 ```ts
+import { DOM } from "@microsoft/fast-element";
+
 // my-card.ts
 @designSystemProvider({
     name: "my-card",
@@ -146,7 +148,7 @@ export class MyCard extends FASTDesignSystemProvider {
         super();
 
         // If constructable stylesheets are supported
-        if ("adoptedStyleSheets" in window.ShadowRoot.prototype) {
+        if (DOM.supportsAdoptedStyleSheets) {
             /**
              * Simple memoization function based on parent provider and current background color. In non-memoized cases,
              * will return: