A bit better demo for #13

11ty · Nov 12, 2022 · 115c459 · 115c459
1 parent b876f8e
commit 115c459
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/demo-styles.css b/demo-styles.css
@@ -51,6 +51,10 @@ is-land[ready] {
   background-color: rgba(112, 110, 233, 0.2);
   outline: 2px solid rgb(97, 82, 173);
 }
+.test-c-finish:defined {
+  color: blue;
+  font-weight: bold;
+}
 
 /* List logos */
 .examples {

diff --git a/is-land.js b/is-land.js
@@ -5,7 +5,7 @@ class Island extends HTMLElement {
   static prefix = "is-land--"
 
   static fallback = {
-    ":scope:not([ssr]) :not(:defined)": (readyPromise, node, prefix) => {
+    ":scope :not(:defined):not([ssr])": (readyPromise, node, prefix) => {
       // remove from document to prevent web component init
       let cloned = document.createElement(prefix + node.localName);
       for(let attr of node.getAttributeNames()) {

diff --git a/issues/13.html b/issues/13.html
@@ -17,15 +17,10 @@ <h1><a href="/">is-land</a></h1>
 	</details-utils>
 </is-land> -->
 
-<is-land ssr on:interaction import="/lib/details-utils.js">
+<is-land on:interaction import="/lib/chocolate-web-component.js">
 	<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
 
-	<details-utils close-click-outside>
-		<details open>
-			<summary>Toggle Menu (Default open: click outside to close after island initializes)</summary>
-			<p>Note that interacting with content inside of the menu works without closing the menu.</p>
-		</details>
-	</details-utils>
+	<chocolate-web-component class="demo-component" ssr>Vanilla web component</chocolate-web-component>
 </is-land>
 
 <!-- <is-land on:idle import="/lib/details-utils.js">
@@ -76,15 +71,10 @@ <h1><a href="/">is-land</a></h1>
 <br>
 <br>
 
-<is-land ssr on:visible import="/lib/details-utils.js">
+<is-land on:visible import="/lib/chocolate-web-component.js">
 	<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
 
-	<details-utils close-click-outside>
-		<details open>
-			<summary>Toggle Menu (Default open: click outside to close after island initializes)</summary>
-			<p>Note that interacting with content inside of the menu works without closing the menu.</p>
-		</details>
-	</details-utils>
+	<chocolate-web-component class="demo-component" ssr>Vanilla web component</chocolate-web-component>
 </is-land>
 
 <!-- <is-land on:visible>

diff --git a/lib/chocolate-web-component.js b/lib/chocolate-web-component.js
@@ -0,0 +1,16 @@
+// Programmatic usage
+// import { ready } from "/is-land.js";
+
+class ChocolateWebComponent extends HTMLElement {
+  async connectedCallback() {
+    // Programmatic API: waiting to lazy load
+    // await ready(this);
+
+    // ready to go
+    this.classList.add("test-c-finish");
+  }
+}
+
+if("customElements" in window) {
+  customElements.define("chocolate-web-component", ChocolateWebComponent);
+}