https://github.com/zy445566/web-components-content
WebComponents base components
https://github.com/zy445566/web-components-content
base components web webcomponents
Last synced: about 2 months ago
JSON representation
WebComponents base components
- Host: GitHub
- URL: https://github.com/zy445566/web-components-content
- Owner: zy445566
- License: mit
- Created: 2020-08-27T06:49:17.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-01-18T08:50:17.000Z (over 5 years ago)
- Last Synced: 2025-10-06T02:28:19.991Z (9 months ago)
- Topics: base, components, web, webcomponents
- Language: TypeScript
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# web-components-content
WebComponents base components
# install
```sh
npm install web-components-content
```
# use
### HTMLContent
```js
import indexHtml from './index.html'
import {HTMLContent} from 'web-components-content'
export default class MyHome extends HTMLContent {
constructor() {
super();
this.render(indexHtml,{name:'Tom'});
this.addStyleSheets(document.styleSheets);
this.init();
}
}
```
OR
```js
const indexHtml ='
${name}
';
import {HTMLContent} from 'web-components-content'
export default class MyHome extends HTMLContent {
constructor() {
super();
this.render(indexHtml,{name:'Tom'});
this.addStyleSheets(document.styleSheets);
this.init();
}
}
```
### MyHashRoute
```html
```
```js
import appHtml from './app.html'
import {HTMLContent,MyHashRoute,MyRouter} from 'web-components-content'
import MyHome from '@/pages/MyHome/index.js'
import myMonitor from '@/pages/myMonitor/index.js'
class AppContainer extends HTMLContent {
constructor() {
super();
this.render(appHtml)
this.addStyleSheets(document.styleSheets)
}
}
window.customElements.define('app-container', AppContainer);
window.customElements.define('my-home', MyHome);
window.customElements.define('my-monitor', myMonitor);
window.customElements.define('my-router', MyRouter);
window.customElements.define('my-hash-route', MyHashRoute);
```
### MyBrowseRoute
```html
```
```js
import appHtml from './app.html'
import {HTMLContent,MyBrowseRoute,MyRouter} from 'web-components-content'
import MyHome from '@/pages/MyHome/index.js'
import myMonitor from '@/pages/myMonitor/index.js'
class AppContainer extends HTMLContent {
constructor() {
super();
this.render(appHtml)
this.addStyleSheets(document.styleSheets)
}
}
window.customElements.define('app-container', AppContainer);
window.customElements.define('my-home', MyHome);
window.customElements.define('my-monitor', myMonitor);
window.customElements.define('my-router', MyRouter);
window.customElements.define('my-browse-route', MyBrowseRoute);
```