Add language-specific note about TypeScript decorators.

lit · Jul 2, 2024 · 1325f46 · 1325f46
1 parent fb937bb
commit 1325f46
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/packages/lit-dev-content/site/css/global.css b/packages/lit-dev-content/site/css/global.css
@@ -80,3 +80,13 @@ a {
   height: 1px;
   overflow: hidden;
 }
+
+body[code-language-preference="ts"] [code-language]:not([code-language="ts"]) {
+  /* Hide JS content when preference is TS. */
+  display: none;
+}
+
+body[code-language-preference="js"] [code-language]:not([code-language="js"]) {
+  /* Hide TS content when preference is JS. */
+  display: none;
+}
diff --git a/packages/lit-dev-content/site/docs/v3/components/overview.md b/packages/lit-dev-content/site/docs/v3/components/overview.md
@@ -26,3 +26,16 @@ Creating a Lit component involves a number of concepts:
 Here's a sample component:
 
 {% playground-example "v3-docs/components/overview/simple-greeting" "simple-greeting.ts" %}
+
+<div code-language="ts">
+
+{% aside "info"%}
+
+This example uses TypeScript decorators.
+
+See the [Decorators](/docs/components/decorators) documentation for more information on configuring TypeScript for decorators.
+
+{% endaside %}
+
+</div>
+