[gem] Share styles

mantou132 · Jul 29, 2024 · c2dd559 · c2dd559
1 parent 11bab76
commit c2dd559
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 31 deletions.
diff --git a/packages/gem/src/elements/base/link.ts b/packages/gem/src/elements/base/link.ts
@@ -1,7 +1,7 @@
-import { GemElement, html } from '../../lib/element';
-import { attribute, property, state, part, connectStore, shadow, aria } from '../../lib/decorators';
+import { createCSSSheet, GemElement, html } from '../../lib/element';
+import { attribute, property, state, part, connectStore, shadow, aria, adoptedStyle } from '../../lib/decorators';
 import { history, basePathStore } from '../../lib/history';
-import { absoluteLocation } from '../../lib/utils';
+import { absoluteLocation, css } from '../../lib/utils';
 import { ifDefined } from '../../lib/directives';
 
 import { matchPath, RouteItem, RouteOptions, createHistoryParams, createPath } from './route';
@@ -10,6 +10,22 @@ function isExternal(path: string) {
   return !path.startsWith('/');
 }
 
+const styles = createCSSSheet(css`
+  :host {
+    /* link default style */
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+  }
+  a {
+    all: unset;
+    display: contents;
+  }
+  a:visited {
+    color: unset;
+  }
+`);
+
 /**
  * @customElement gem-link
  * @attr href
@@ -25,6 +41,7 @@ function isExternal(path: string) {
  * Bug: print `<link>` https://github.com/mantou132/gem/issues/36
  */
 @connectStore(basePathStore)
+@adoptedStyle(styles)
 @shadow()
 @aria({ focusable: true })
 export class GemLinkElement extends GemElement {
@@ -125,21 +142,6 @@ export class GemLinkElement extends GemElement {
 
   render() {
     return html`
-      <style>
-        :host {
-          /* link default style */
-          cursor: pointer;
-          color: blue;
-          text-decoration: underline;
-        }
-        a {
-          all: unset;
-          display: contents;
-        }
-        a:visited {
-          color: unset;
-        }
-      </style>
       <a
         part=${this.link}
         @click=${this.#preventDefault}

diff --git a/packages/gem/src/elements/base/use.ts b/packages/gem/src/elements/base/use.ts
@@ -1,5 +1,18 @@
-import { GemElement, html } from '../../lib/element';
-import { attribute, property, shadow, state } from '../../lib/decorators';
+import { createCSSSheet, GemElement, html } from '../../lib/element';
+import { adoptedStyle, attribute, property, shadow, state } from '../../lib/decorators';
+import { css } from '../../lib/utils';
+
+const styles = createCSSSheet(css`
+  :host(:where(:not([hidden]))) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`);
 
 const eleCache = new Map<string, HTMLTemplateElement>();
 /**
@@ -12,6 +25,7 @@ const eleCache = new Map<string, HTMLTemplateElement>();
  * @attr selector
  */
 @shadow()
+@adoptedStyle(styles)
 export class GemUseElement extends GemElement {
   @attribute selector: string; // CSS 选择器
   @property root?: HTMLElement | Document | ShadowRoot;
@@ -38,17 +52,6 @@ export class GemUseElement extends GemElement {
 
   render() {
     return html`
-      <style>
-        :host(:where(:not([hidden]))) {
-          position: relative;
-          display: inline-flex;
-          align-items: center;
-        }
-        svg {
-          width: 100%;
-          height: 100%;
-        }
-      </style>
       ${this.#getContent()}
       <slot></slot>
     `;