@skax/web-components

Web Components

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。

Scripts

# development
pnpm run dev

# production
pnpm run build

# build document
# https://github.com/http-party/http-server
# version >= 14
pnpm run docs
cd docs && http-server -p 8080 .
Copy

Use

pnpm install @skax/web-components

component

wc-input, wc-button, wc-list

html

<!-- script -->
<script src="./lib/bundle/@skax/web-components.umd.js"></script>

<form action="/get" name="form">
  <label for="name">
    <wc-input type="text" name="name" id="name" placeholder="input name"></wc-input>
  </label>
  <label for="password">
    <wc-input type="password" name="password" id="password" placeholder="input password"></wc-input>
  </label>
  <wc-button type="submit">Submit</wc-button>
  <wc-button type="rest">Rest</wc-button>
</form>
Copy

react

import '@skax/web-components';
// import '@skax/web-components/es/button'

function App() {
  return <wc-button>Button</wc-button>;
}
Copy

如果使用了 typescript，在 react-app-env.d.ts中添加下面声明。

/// <reference types="@skax/web-components" />

export declare global {
  namespace JSX {
    interface IntrinsicElements {
      'wc-button': WCButtonElement;
      'wc-input': WCInputElement;
      'wc-list': WCListElement;
    }
  }
}
Copy

example

vue3

<script setup>
  import '@skax/web-components';
  // import '@skax/web-components/es/button'
</script>

<template>
  <wc-button>Button</wc-button>
</template>
Copy

example