lit · AndrewJakubowicz · Sep 22, 2023 · Sep 18, 2023 · Sep 18, 2023 · Sep 18, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lit-dev-content/package.json b/packages/lit-dev-content/package.json
@@ -194,6 +194,7 @@
     "slugify": "^1.3.6"
   },
   "dependencies": {
+    "@lit-labs/context": "^0.4.1",
     "@lit-labs/motion": "^1.0.1",
     "@lit-labs/react": "^1.0.8",
     "@lit-labs/task": "^3.0.2",

diff --git a/packages/lit-dev-content/samples/examples/context-basics/elements.ts b/packages/lit-dev-content/samples/examples/context-basics/elements.ts
@@ -0,0 +1,55 @@
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {provide, consume, createContext} from '@lit-labs/context';
+
+import {providerStyles} from './styles.js';
+
+const contextKey = Symbol('contextKey');
+// The values that will be provided and consumed in this demo will
+// be strings.
+type ContextValue = string;
+// Context object, which acts like a key for the context.
+// The context object acts as a key. A consumer will only receive
+// values from a provider if their contexts match. A Symbol ensures
+// that this context will be unique.
+const context = createContext<ContextValue>(Symbol());
+
+@customElement('provider-el')
+export class ProviderEl extends LitElement {
+  static styles = providerStyles;
+
+  /**
+   * `data` will be provided to any consumer that is in the DOM tree below it.
+   */
+  @provide({context})
+  @property()
+  data = 'Initial';
+
+  render() {
+    return html`
+      <h3>Provider's data: <code>${this.data}</code></h3>
+      <slot></slot>
+    `;
+  }
+}
+
+@customElement('consumer-el')
+export class ConsumerEl extends LitElement {
+  /**
+   * `providedData` will be populated by the first ancestor element which
+   * provides a value for `context`.
+   */
+  @consume({context})
+  providedData = '';
+
+  render() {
+    return html` <h3>Consumer data: <code>${this.providedData}</code></h3> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'provider-el': ProviderEl;
+    'consumer-el': ConsumerEl;
+  }
+}
diff --git a/packages/lit-dev-content/samples/examples/context-basics/index.html b/packages/lit-dev-content/samples/examples/context-basics/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<script type="module" src="./elements.js"></script>
+<style>
+  :root {
+    font-family: sans-serif;
+  }
+</style>
+
+<h3>Basic Context Example</h3>
+<p>
+  The <code>&lt;consumer-el></code> receives its data from
+  <code>&lt;provider-el></code> without property drilling.
+</p>
+<hr>
+
+<provider-el>
+  <consumer-el></consumer-el>
+</provider-el>
+<hr>
+
+<provider-el data="specified from attribute">
+  <consumer-el></consumer-el>
+</provider-el>
+<hr>
+
+<p>
+  Checkout our
+  <a
+    href="https://lit.dev/docs/data/context/"
+    target="_blank"
+    rel="noopener noreferrer"
+    >Context documentation</a
+  >!
+</p>
diff --git a/packages/lit-dev-content/samples/examples/context-basics/project.json b/packages/lit-dev-content/samples/examples/context-basics/project.json
@@ -0,0 +1,15 @@
+{
+  "extends": "/samples/base.json",
+  "title": "Context Basics",
+  "description": "Share data from a provider element with Context.",
+  "section": "Managing Data",
+  "files": {
+    "elements.ts": {},
+    "index.html": {},
+    "styles.ts": {}
+  },
+  "package.json": {
+    "content": "{\n  \"dependencies\": {\n    \"lit\": \"^2\",\n    \"@lit-labs/context\": \"^0.4\"\n}\n}",
+    "hidden": true
+  }
+}
diff --git a/packages/lit-dev-content/samples/examples/context-basics/styles.ts b/packages/lit-dev-content/samples/examples/context-basics/styles.ts
@@ -0,0 +1,18 @@
+import {css} from 'lit';
+export const providerStyles = css`
+  slot {
+    display: block;
+    border: dashed 4px #dadada;
+    padding: 0px 10px;
+  }
+
+  :host {
+    display: block;
+    border: solid 4px #adadad;
+    padding: 2px;
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+`;