fix(web-component): fix target props issue.

Author: jaywcjlove

react/README.md

@@ -136,8 +136,8 @@ Runs the project in development mode.
 # Step 1, run first, listen to the component compile and output the .js file
 npm run hoist
 # Step 2, listen for compilation output type .d.ts file
-npm run watch 
-npm run css:watch
+npm run watch:wc
+npm run watch
 # Step 3, development mode, listen to compile preview website instance
 npm run start
 ```

react/src/index.tsx

@@ -51,6 +51,6 @@ export default function githubCorners(props: GitHubCornersProps) {
     styl.top = 0;
   }
   return (
-    <github-corners 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}></github-corners>
   );
 }

web-component/src/index.ts

@@ -55,14 +55,15 @@ export class GithubCorners extends HTMLElement {
   color?: string;
   fill?: string;
   position?: string;
+  target?: string;
   top?: string;
   left?: string;
   right?: string = '0';
   bottom?: string;
   transform?: string;
   warpper?: HTMLElement;
   static get observedAttributes(): string[] {
-    return ['z-index', 'height', 'width', 'href', 'color', 'fill', 'position', 'top', 'left', 'right', 'bottom', 'transform'];
+    return ['z-index', 'target', 'height', 'width', 'href', 'color', 'fill', 'position', 'top', 'left', 'right', 'bottom', 'transform'];
   }
   constructor() {
     super();
@@ -73,18 +74,6 @@ export class GithubCorners extends HTMLElement {
     shadow.appendChild(this.ownerDocument.importNode(TEMPLATE.content, true));
     this.warpper = shadow.getElementById('warpper');
 
-    // const svg = warpper.firstElementChild as SVGAElement;
-    // console.log('>>>href', this.getAttributeNames())
-    // console.log('>>>hre222f', warpper, warpper.querySelector('a'))
-    // ;[...this.getAttributeNames(), 'right'].forEach((name) => {
-    //   if (/(z-index|height|width|color|fill|position|top|left|right|bottom|transform)/.test(name.toLocaleLowerCase())) {
-    //     svg.style[name as any] = this.getAttribute(name) || this[name as keyof GithubCorners] as any;
-    //     console.log('~~~', name, this['left'], this.getAttribute(name))
-    //   } else {
-    //     console.log('name::', name,  this.getAttribute(name))
-    //     warpper.setAttribute(name, this.getAttribute(name));
-    //   }
-    // });
     this.update();
   }
   update() {
@@ -97,6 +86,9 @@ export class GithubCorners extends HTMLElement {
       }
     });
   }
+  connectedCallback() {
+    this.update()
+  }
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
     this.update()
   }