nativeweb

簡單的Web組件的小庫。
_1kB

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'hey-internet' )
class Component extends Element {
    @ property ( ) emoji ;

    render ( ) {
        return `
            <h1>Hey Internet ${ this . emoji } </h1>
        ` ;
    }
} 

 < hey-internet emoji ="" > </ hey-internet >

本機Web組件

封裝樣式和腳本

用裝飾工簡化

小占地面積

一個命令開始

npm init nativeweb

或添加到您現有的項目

npm install nativeweb

裝飾者

@component

@property

@event

@customEvent

@query

@queryAll

@component

定義自定義元素並添加樣式。從外部文件或同一文件中。 styles可以是array樣式。

 import { component , Element } from 'nativeweb' ;
import styles from './hey-styles.css.js' ;

@ component ( 'some-styles' , styles )
class Component extends Element {
    render ( ) {
        return `
            <h1>Some Styles</h1>
        ` ;
    }
} 

 import { css } from 'nativeweb' ;

export default css `
    h1 {
        color: orange;
    }
` ; 

 < hey-styles > </ hey-styles >

@property

獲取轉換為指定類型的屬性或使用可選默認值定義屬性。
String ， Boolean ， Number ， Array或Object 。

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'cool-property' )
class Component extends Element {
    @ property ( ) cool = 'Cool Prop' ;
    @ property ( String ) title = 'Default Title' ;
    @ property ( Number ) multiplier ;

    render ( ) {
        return `
            <h1> ${ this . title } </h1>
            <h2> ${ this . cool } ➡️ ${ 2 * this . multiplier } </h2>
        ` ;
    }
} 

 < cool-property title =" Cool Title ? " multiplier =" 3 " > </ cool-property >

@event

將事件偵聽器添加到組件，名為@name的子元素或外部組件事件中。

 import { component , event , Element } from 'nativeweb' ;

@ component ( 'easy-event' )
class Component extends Element {
    @ event ( ) mouseenter = this . onHover ( ) ;
    @ event ( ) click = {
        '@title' : this . onClick ( ) ,
        '@button' : this . onClick ( )
    } ;
    @ event ( ) ready = {
        'other-component' : this . onReady ( )
    } ;

    onHover ( ) {
        console . log ( 'Hover Component' ) ;
    }
    onClick ( e ) {
        console . log ( e . currentTarget ) ;
    }
    onReady ( { detail } ) {
        console . log ( detail ) ;
    }

    render ( ) {
        return `
            <h1 @title>Easy Event</h1>
            <button @button>Click Me</button>
        ` ;
    }
} 

 < easy-event > </ easy-event >

@customEvent

創建一個自定義的全局事件，並用組件名稱命名。準備派遣。聽眾在上面的組件中。

 import { component , customEvent , Element } from 'nativeweb' ;

@ component ( 'other-component' )
class Component extends Element {
    @ customEvent ( ) ready = 'Ready ' ;

    connected ( ) {
        dispatchEvent ( this . ready ) ;
    }

    render ( ) {
        return `
            <h1>Other Component</h1>
        ` ;
    }
} 

 < other-component > </ other-component >

@query

查詢選擇器@name子元素。

 import { component , query , Element } from 'nativeweb' ;

@ component ( 'simple-query' )
class Component extends Element {
    @ query ( ) title ;

    connected ( ) {
        this . title . innerText = 'Better Title ?' ;
    }

    render ( ) {
        return `
            <h1 @title>Good Title</h1>
        ` ;
    }
} 

 < simple-query > </ simple-query >

@queryAll

查詢選擇器所有@name子元素。

 import { component , queryAll , Element } from 'nativeweb' ;

@ component ( 'all-query' )
class Component extends Element {
    @ queryAll ( ) title ;

    connected ( ) {
        this . title . forEach ( el => ( el . style . color = 'lightgreen' ) ) ;
    }

    render ( ) {
        return `
            <h1 @title>One Title</h1>
            <h2 @title>Other Title</h2>
        ` ;
    }
} 

 < all-query > </ all-query >

生命週期

render() →呈現組件。

connected() →當組件插入DOM時。

disconnected() →調用當組件從DOM中刪除時。

當組件被移至新文檔時， adopted() →調用。

當觀察到的屬性更改時attributeChanged() →調用。

方法

this.update() →重新註冊組件。

特性

this.properties →獲取所有屬性。

尖端

共享樣式

作品

有條件

環形

可變元素

共享樣式

在組件中包括全局樣式。

 import { css } from 'nativeweb' ;
import global from '../global-style.css.js' ;

export default [
    global ,
    css `
        h1 {
            color: orange;
        }
    `
] ;

作品

帶有默認插槽的組件組成和命名插槽。

 import { component , Element } from 'nativeweb' ;

@ component ( 'slot-example' )
class Component extends Element {
    render ( ) {
        return `
            <header>
                <h1><slot name="title"></slot></h1>
                <slot></slot>
            </header>
        ` ;
    }
} 

 < slot-example >
    < span slot =" title " > Named slot </ span >
    < p > Default slot </ p >
</ slot-example >

有條件

有條件的香草JS渲染。

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'condition-example' )
class Component extends Element {
    @ property ( ) isGood = false ;

    render ( ) {
        return `
            ${ this . isGood ? `<h1>Good</h1>` : `` }
        ` ;
    }
}

環形

在香草JS中渲染循環。

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'loop-example' )
class Component extends Element {
    @ property ( ) emojis = [ '?' , '?' , '?' ] ;

    render ( ) {
        return `
            ${ this . emojis . map ( item => `<span> ${ item } </span>` ) . join ( '' ) }
        ` ;
    }
}

可變元素

從屬性渲染元素。

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'element-example' )
class Component extends Element {
    @ property ( ) as = 'p' ;

    render ( ) {
        return `
            < ${ this . as } >Heading 1</ ${ this . as } >
        ` ;
    }
} 

 < element-example as =" h1 " > </ element-example >