Add language-specific note about TypeScript decorators. (#1345)

lit · Jul 2, 2024 · 9db43a0 · 9db43a0
1 parent fb937bb
commit 9db43a0
Show file tree

Hide file tree

Showing 2 changed files with 22 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,15 @@ 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/v3/components/decorators) documentation for more information on configuring TypeScript for decorators.
+
+{% endaside %}
+
+</div>