Proposal/RFC scoped styles with custom elements

js/src/components/connected-icon-label/index.js

@@ -1,33 +1,39 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { Flex, FlexItem } from '@wordpress/components';
 import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
 
 /**
  * Internal dependencies
  */
-import './index.scss';
+import { css, defineShadowStylesHost } from '.~/utils/defineShadowStylesHost';
 
-const ConnectedIconLabel = ( props ) => {
-	const { className } = props;
+export const ConnectedIconLabelStyle = css`
+	:host {
+		display: inline-flex;
+		fill: currentcolor;
+		color: #23a713;
+		gap: var( --wp-grid-gap, 4px );
+		align-items: center;
 
-	return (
-		<Flex
-			className={ classnames( 'gla-connected-icon-label', className ) }
-			align="center"
-			gap={ 1 }
-		>
-			<FlexItem>
-				<GridiconCheckmarkCircle />
-			</FlexItem>
-			<FlexItem>
-				{ __( 'Connected', 'google-listings-and-ads' ) }
-			</FlexItem>
-		</Flex>
-	);
-};
+		direction: row;
+		justify-content: space-between;
+	}
+	::slotted( svg ) {
+		display: block;
+	}
+`;
+
+defineShadowStylesHost( 'gla-connected-icon-label', [
+	ConnectedIconLabelStyle,
+] );
+
+const ConnectedIconLabel = ( { className, ...props } ) => (
+	<gla-connected-icon-label class={ className } { ...props }>
+		<GridiconCheckmarkCircle />
+		{ __( 'Connected', 'google-listings-and-ads' ) }
+	</gla-connected-icon-label>
+);
 
 export default ConnectedIconLabel;

js/src/utils/defineShadowStylesHost.js

@@ -0,0 +1,50 @@
+/**
+ * Utility to define scoped styles using a custom element with a shadow root.
+ */
+/* global CSSStyleSheet, HTMLElement */
+/**
+ * A template literal tag to create stylesheet objects.
+ *
+ * It's overly simplify, in future we may introduce more features, like:
+ * - Safari support
+ * - lazy constructing - not to create object untill the first instance is used
+ * - safe rules nesting
+ * - etc.
+ *
+ * @param {TemplateStringsArray} strings
+ * @param  {Array} values
+ * @return {CSSStyleSheet} Constructed stylesheet.
+ */
+export const css = ( strings, ...values ) => {
+	const cssText =
+		strings.length === 1
+			? strings[ 0 ]
+			: values.reduce(
+					( accumulator, value, index ) =>
+						accumulator + value + strings[ index + 1 ],
+					strings[ 0 ]
+			  );
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync( cssText );
+	return sheet;
+};
+
+/**
+ * Creates a custom element that will act as the host for given styles.
+ *
+ * @param {string} name Valid custom element name.
+ * @param {Array<CSSStyleSheet>} styles Style sheets to be adoptes by the host.
+ */
+export const defineShadowStylesHost = ( name, styles ) => {
+	window.customElements.define(
+		name,
+		class extends HTMLElement {
+			constructor() {
+				super();
+				const shadowRoot = this.attachShadow( { mode: 'open' } );
+				shadowRoot.innerHTML = `<slot></slot>`;
+				shadowRoot.adoptedStyleSheets = styles;
+			}
+		}
+	);
+};