I am new to polymer js
I tried simple polymer application using menu navigation for home ,about and gallery page
index.html page
<html>
<head>
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js">
</script>
<script type="module" src="src/menu.js"></script>
<script type="module" src="src/aboutus.js"></script>
<script type="module" src="src/home.js"></script>
<script type="module" src="src/gallery.js"></script>
</head>
<body>
<menu class='menu'></menu>
<home class='home'></home>
</body>
</html>
Menu component
import {LitElement, html} from '../node_modules/@polymer/lit-element/lit-element.js';
export class Menu extends LitElement {
constructor() {
super();
}
_render({}) {
return html` <a name="view1" href="/home">Home</a>
<a name="view2" href="/about">About Us</a><
<a name="view3" href="/galery">Gallery</a> `;
}
}
customElements.define('menu', Menu);
home page
export class Home extends LitElement {
constructor() {
super();
}
_render({}) {
return html` <div> Home </div>`;
}
}
customElements.define('home', Home);
about and gallery page have same as home component. In menu we have link for all the 3 pages. need to displayed each of he page on right hand side on click of each link.
In default home page displayed in index.html.On click of the link about need to show about us page and on click of the link gallery need to show gallery page.