Finishing touches

marko-js · Jan 30, 2023 · 1c75bee · 1c75bee
1 parent c5f4c48
commit 1c75bee
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/content/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko
@@ -1,8 +1,14 @@
 <h1.title>I am red</h1>
 <button style={ fontSize: "10rem" }>I am a button</button>
+<button class=scopedButton>I am a style-scoped button</button>
 
-<style> /* TODO: the Vue example uses style scoping, maybe we should show ours off too here */
+<style>
   .title {
     color: red;
   }
 </style>
+<style/{ scopedButton }>
+  .scopedButton {
+    font-size: 10rem;
+  }
+</style>
diff --git a/content/2-templating/5-dom-ref/marko/InputFocused.marko b/content/2-templating/5-dom-ref/marko/InputFocused.marko
diff --git a/content/2-templating/5-dom-ref/marko/InputIndeterminate.marko b/content/2-templating/5-dom-ref/marko/InputIndeterminate.marko
@@ -0,0 +1,2 @@
+<input/inputElement type="checkbox">
+<effect() { inputElement().indeterminate = true }/>
diff --git a/content/3-lifecycle/1-on-mount/marko/PageTitle.marko b/content/3-lifecycle/1-on-mount/marko/PageTitle.marko
diff --git a/content/3-lifecycle/1-on-mount/marko/ViewportSize.marko b/content/3-lifecycle/1-on-mount/marko/ViewportSize.marko
@@ -0,0 +1,3 @@
+<let/viewportSize = ""/>
+<effect() { viewportSize = `${window.innerWidth} × ${window.innerHeight}` }/>
+<p>Viewport size: ${viewportSize}</p>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<input/inputElement type="checkbox">
		<effect() { inputElement().indeterminate = true }/>