fix(react-github-corners): fix position issue.

Author: jaywcjlove

react/src/index.tsx

@@ -51,6 +51,18 @@ export default function githubCorners(props: GitHubCornersProps) {
     styl.top = 0;
   }
   return (
-    <github-corners target="__blank" width={size} height={size} href={props.href} position={fixed ? 'fixed' : 'absolute'} z-index={zIndex} style={style} fill={bgColor} color={color} {...styl} {...otherProps}></github-corners>
+    <github-corners
+      target="__blank"
+      width={size}
+      height={size}
+      href={props.href}
+      position={fixed ? 'fixed' : 'absolute'}
+      z-index={zIndex}
+      style={style}
+      fill={bgColor}
+      color={color}
+      {...styl}
+      {...otherProps}
+    />
   );
 }

web-component/src/index.ts

@@ -69,29 +69,30 @@ export class GithubCorners extends HTMLElement {
   }
   constructor() {
     super();
-    this.initDom();
-  }
-  private initDom() {
     this.shadow = this.attachShadow({ mode: 'open' });
     this.shadow.appendChild(this.ownerDocument.importNode(TEMPLATE.content, true));
-    this.update();
+    this.update()
+  }
+  private setAttr(name: string, value: string) {
+    const svg = this.shadow.querySelector('svg');
+    if (/(color|fill)/.test(name.toLocaleLowerCase())) {
+      (svg.firstElementChild as HTMLAnchorElement).style[name as any] = value;
+    } else if (/(z-index|height|width|position|top|left|right|bottom|transform)/.test(name.toLocaleLowerCase())) {
+      svg.style[name as any] = value;
+    } else {
+      svg.setAttribute(name, value);
+    }
   }
   private update() {
-    const svg = this.shadow.querySelector('svg')
     ;[...this.getAttributeNames(), 'right'].forEach((name) => {
       const value = this.getAttribute(name) || this[name as keyof GithubCorners] as any || '';
-      if (/(z-index|height|width|color|fill|position|top|left|right|bottom|transform)/.test(name.toLocaleLowerCase())) {
-        svg.style[name as any] = value;
-      } else {
-        svg.setAttribute(name, value);
-      }
+      this.setAttr(name, value);
     });
   }
-  connectedCallback() {
-    this.update()
-  }
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    this.update()
+    if (oldValue !== newValue) {
+      this.setAttr(name, newValue);
+    }
   }
 }
 

website/src/App.css

@@ -58,6 +58,7 @@ body {
 }
 
 .App-button button.select {
+  color: #333;
   text-shadow: 0 1px hsl(0deg 0% 100% / 90%), 0 -1px hsl(0deg 0% 100% / 90%), 1px 0px hsl(0deg 0% 100% / 90%), -1px 0px hsl(0deg 0% 100% / 90%)
 }
 .App-button button {