WebComponents만으로 앱의 골격을 만들어 봅니다.

소개

WebComponents, 무엇이 좋은가 하면 브라우저에서 네이티브에 대응하고 있는 것이군요.

이제 본가, 3rd 파티도 라이브러리가 충실해 왔고, Vue라든지 React라든지의 프레임워크를 사용하지 않고 WebComponents만으로 갈 수 있을 것 같은 느낌이 되어 왔으므로, 우선 아래와 같은 앱의 골격을 만들어 검증해 봐.

공식 구체 l. 이오 의 GitHub

material-components-android

material-components-ios

material-components-web

material-components-flutter

그 외

material-components-web-components

라는 것이 있습니다 (이름이 매우 활기찬 >>). GUI 컴퍼넌트로서 이번에 이것을 사용하게 합니다.

또한 router로서,

VAADIN ROUTER A CLIENT-SIDE ROUTER FOR WEB COMPONENTS

사용하십시오.

조속히 만들어 봅시다.

준비

node, npm 다운로드

htps : // 그래서 js. 오 rg
이 기사는 node v12.4.0, npm 6.12.0에서 검증되었습니다.

디렉토리를 파고 cd하여 node 프로젝트를 만듭니다.

$ mkdir wc
$ cd wc
$ yarn init

es-dev-server를 설치하고 실행하십시오.

$ npm install -g es-dev-server
$ es-dev-server --node-resolve --watch

8000번 포트가 사용되지 않으면es-dev-server started on http://localhost:8000라고 표시됩니다. 브라우저에서 여기를 방문하세요.

--node-resolve 옵션이 필요한 이유를 알고 싶다면 다음을 참조하십시오.

만들기

사용할 구성 요소 등록

$ yarn add @material/mwc-drawer
$ yarn add @material/mwc-icon-button
$ yarn add @material/mwc-top-app-bar
$ yarn add @vaadin/router

메인 화면에 표시할 WebComponent 작성

Main.js

class
Main extends HTMLElement {
    constructor() {
        super();
        this.attachShadow( { mode: 'open' } ).innerHTML = '<div>MAIN</div>'
    }
}
customElements.define( 'jp-main', Main )

About.js

class
About extends HTMLElement {
    constructor() {
        super();
        this.attachShadow( { mode: 'open' } ).innerHTML = '<div>ABOUT</div>'
    }
}
customElements.define( 'jp-about', About )

결론

index.html

<!doctype html>
<html lang=zxx>
    <title>drawer demo</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

<body>
    <script type="module">
        import '@material/mwc-drawer'
        import '@material/mwc-top-app-bar'
        import '@material/mwc-icon-button'
        import './Main'
        import './About'

        import { Router } from '@vaadin/router'

        class
        App extends HTMLElement {
            constructor() {
                super();
                this.attachShadow( { mode: 'open' } ).innerHTML = `
                    <mwc-drawer hasHeader type="dismissible">
                        <span slot="title">Drawer Title</span>
                        <span slot="subtitle">subtitle</span>
                        <div>
                            <p>Drawer content</p>
                            <a href="/">Main</a><br />
                            <a href="/About">About</a><br />
                        </div>
                        <div slot="appContent">
                            <mwc-top-app-bar>
                                <mwc-icon-button slot="navigationIcon" icon="menu"></mwc-icon-button>
                                <div slot="title">Title</div>
                            </mwc-top-app-bar>
                            <div id="outlet" />
                        </div>
                    </mwc-drawer>
                `

                const router = new Router( this.shadowRoot.getElementById( 'outlet' ) )
                router.setRoutes(
                    [   { path: '/'         , component: 'jp-main'  }
                    ,   { path: '/about'    , component: 'jp-about' }
                    ]
                )

                const drawer = this.shadowRoot.querySelector( 'mwc-drawer' )
                drawer.addEventListener(
                    'MDCTopAppBar:nav'
                ,   _ => drawer.open = !drawer.open
                )
            }
        }
        customElements.define( 'jp-app', App )

    </script>
    <jp-app />
</body>

감옥

navigationIcon

mwc-top-app-bar 의 navigationIcon 슬롯에 넣어진 버튼을 누르면(자), mwc-drawer 에 대해서 MDCTopAppBar:nav 이벤트가 보내집니다.

shadowRoot

WebComponent 는 constructor 안에서 attachShadow 하면 shadowRoot 를 사용할 수 있게 됩니다. 비공개 DOM처럼 보입니다. 이것을 실제의 DOM 에 connect 하고 표시하게 됩니다.
constructor 안에서는 아직 실제의 DOM 에 커넥트 되고 있지 않기 때문에, shadowRoot 에 대해서 getElement... 라든지 querySelector 라든지 발행해, 엘리먼트를 취합니다.

shadowRoot 에 대해서, 이번 기사에서는 innerHTML 를 정적 텍스트로 세트 하고 있을 뿐입니다만, 실제로는 다이나믹하게 생성하고 싶은 경우가 많다고 생각됩니다. 그런 경우에는 polymer lit-element 을 사용하는 옵션이 있습니다. lit-html이라는 HTML 템플릿 라이브러리를 래핑한 것입니다.

이전 브라우저 지원

Edge 또는 IE11을 지원하려면 폴리필이 필요합니다. 자세한 내용은 아래를 참조하십시오.

마지막으로

lit-element 을 사용하면 reactive가 됩니다. 또 다른 기사에서 소개시켜 주셨으면합니다.

Reference

이 문제에 관하여(WebComponents만으로 앱의 골격을 만들어 봅니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Satachito/items/4ce25efc6a630a66ba17

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다