From 62ae95c43c7ab46ecf8f24342ae937fa82095194 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 19 Feb 2024 15:37:51 +0100
Subject: [PATCH] add examples for exportparts and slotted children
---
templates/009-web-components/slotted.js | 21 ++++++++++
templates/009-web-components/slotted.html | 13 ++++++
templates/009-web-components/exportparts.js | 39 +++++++++++++++++++
templates/009-web-components/exportparts.html | 20 ++++++++++
4 files changed, 93 insertions(+), 0 deletions(-)
diff --git a/templates/009-web-components/exportparts.html b/templates/009-web-components/exportparts.html
new file mode 100644
index 0000000..c20181a
--- /dev/null
+++ b/templates/009-web-components/exportparts.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>exportparts</title>
+ <script defer src="exportparts.js"></script>
+ </head>
+ <body>
+ <style>
+ outer-component::part(/* insert part */) {
+ color: red;
+ }
+
+ outer-component::part(/* insert part */) {
+ color: blue;
+ }
+ </style>
+ <outer-component></outer-component>
+ </body>
+</html>
diff --git a/templates/009-web-components/exportparts.js b/templates/009-web-components/exportparts.js
new file mode 100644
index 0000000..a8cfa1b
--- /dev/null
+++ b/templates/009-web-components/exportparts.js
@@ -0,0 +1,39 @@
+class InnerComponent extends HTMLElement {
+ constructor() {
+ super();
+
+ const shadowRoot = this.attachShadow({mode: "open"});
+
+ shadowRoot.innerHTML = `
+ <style>
+ :host {
+ display: inline;
+ }
+ </style>
+
+ <div>Inner Text</div>
+ `;
+ }
+}
+
+class OuterComponent extends HTMLElement {
+ constructor() {
+ super();
+
+ const shadowRoot = this.attachShadow({mode: "open"});
+
+ shadowRoot.innerHTML = `
+ <style>
+ :host {
+ display: inline;
+ }
+ </style>
+
+ <div>Outer Text</div>
+ <inner-component></inner-component>
+ `;
+ }
+}
+
+window.customElements.define("inner-component", InnerComponent);
+window.customElements.define("outer-component", OuterComponent);
diff --git a/templates/009-web-components/slotted.html b/templates/009-web-components/slotted.html
new file mode 100644
index 0000000..a34de8d
--- /dev/null
+++ b/templates/009-web-components/slotted.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Slotted Children</title>
+ <script defer src="slotted.js"></script>
+ </head>
+ <body>
+ <slot-styler>
+ <!-- Slotted children -->
+ </slot-styler>
+ </body>
+</html>
diff --git a/templates/009-web-components/slotted.js b/templates/009-web-components/slotted.js
new file mode 100644
index 0000000..d770e21
--- /dev/null
+++ b/templates/009-web-components/slotted.js
@@ -0,0 +1,21 @@
+class SlotStyler extends HTMLElement {
+ constructor() {
+ super();
+
+ const shadowRoot = this.attachShadow({mode: "open"});
+
+ shadowRoot.innerHTML = `
+ <style>
+ :host {
+ display: block;
+ }
+
+ /* Slotted Styles here */
+ </style>
+
+ <slot></slot>
+ `;
+ }
+}
+
+window.customElements.define("slot-styler", SlotStyler);
--
Gitblit v1.9.3