docs: add missing web components snippets for env variable section

docs/configure/environment-variables.md

@@ -49,6 +49,7 @@ Then you can access this environment variable anywhere, even within your stories
     'vue/my-component-with-env-variables.2.js.mdx',
     'vue/my-component-with-env-variables.3.js.mdx',
     'angular/my-component-with-env-variables.ts.mdx',
+    'web-components/my-component-with-env-variables.js.mdx',
   ]}
 />
 
@@ -76,4 +77,4 @@ The table below lists the available options:
 
 <div class="aside">
 Note: By default Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
-</div>
+</div>

docs/snippets/web-components/my-component-with-env-variables.js.mdx

@@ -0,0 +1,19 @@
+```js
+// my-component.stories.js
+
+import { html } from 'lit-html';
+
+import './my-component';
+
+export default {
+  title: 'A story using environment variables inside a .env file',
+};
+
+const Template = ({ propertyA }) => html`<my-component .propertyA=${propertyA}></my-component>`;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  propertyA: process.env.STORYBOOK_DATA_KEY,
+};
+```