In this tutorial, you'll build your first custom element with Polymer 3.0. You’ll create a simple toggle button:
You’ll be able to use the toggle button with simple markup like this:
Step 1: Set up
In this step, you'll:
To follow this tutorial, you’ll first need to install some command line tools. See the Polymer CLI install guide for full instructions on setting up Polymer CLI and its prerequisites (Git, npm, and Node.js).
Install Polymer CLI
If you're comfortable that you have all the prerequisites installed, update Polymer CLI with the following command:
npm install -g polymer-cli
If you don't have the prerequisites, or you're not sure whether you have them, follow the Polymer CLI install guide.
Download the starting code
Download the starting code for this tutorial by running the following command:
git clone https://github.com/PolymerLabs/polymer-3-first-element.git
Open the project folder:
Your top-level project folder should look something like this:
README.md demo icon-toggle-finished icon-toggle.js index.html package.json polymer.json
The main file you’ll work with is
icon-toggle.js in the top-level project folder. This file contains the definition for your a custome element, which you will modify.
Install dependencies and run the demo
To install the element's dependencies and run the demo:
npm installfrom the repo directory:
This installs the components and dependencies required to use the Polymer library and other web components.
You will now see an extra folder named
node_modulesand an extra file named
README.md demo icon-toggle-finished icon-toggle.js index.html node_modules package.json package-lock.json polymer.json
node_modulesis where the project's dependencies are installed.
package-lock.jsoncontains some npm-related dependency-management info.
Run the Polymer development server from the root project directory:
polymer serve --open
You’ll see something like this:
Keep the demo open, and move on to step 2.