Polymer 3 - Code Like A Google Developer

Start from scratch, add a polyfill for browser compatibility, and load a module script to create and render a custom counter web component using a template.

Explore how the Shadow DOM encapsulates styles and markup inside a Polymer component, keeping styles scoped from the rest of the document and demonstrating with practical examples.

Learn how to define and pass properties in Polymer 3 components, customize color, background, and font weight, and render dynamic styles through component properties.

Use slots to project user content into a component, including named slots such as header, content, and footer. Compare slots with properties and observe how shadow DOM renders slotted content.

Learn how to declare slots in a Polymer 3 component and set default content for header, content, and footer, ensuring content renders when slots are omitted.

Learn to create and nest child components inside a polymer element, passing title and color to nested components. Explore slots and shadow roots to manage content and reuse.

Learn how to handle JavaScript events in Polymer: create a single component, style a primary button, and implement click and mouseover handlers with method binding and argument passing.

Learn to attach a click event listener by element ID using first rendered, get element by ID, and add an event listener to handle the mouse event.

Explore how Polymer 3 renders a counter by wiring plus and minus buttons, updating total as numbers or objects, and using a render request to reflect changes.

Learn to set up and run Polymer apps locally by installing npm dependencies, configuring a local server, and updating the index files to load Polymer components.

Create a simple Polymer 3 phone book app with a two-column layout, a side menu, and a contacts section with a form to add entries.

Organize your polymer app by turning sections into reusable components, such as the side menu, content area, and contacts list, then export/import components and restart dev server to apply changes.

Style a side menu in Polymer 3 with a 200–250 pixel width, colors, and icons. Create a two-column main page using display grid and careful padding.

Style the content area and contact list with color, padding, and typography; enable a responsive grid and hover transitions for contact cards with a user image and a background image.

Duplicate the contact list to create a favorites list, import it into the content area, and style a three-column card grid with 80-pixel images and tailored padding using Polymer css.

Create a form popup component in a Polymer 3 project, import and style a centered overlay, and add fields for first name, last name, address, city, state, and zip code.

Style a multi-field form by applying consistent padding, font sizes, and box sizing to form groups, labels, and inputs, and implement a global css file for unified styling.

Master polymer 3 form popup by styling icons, implementing an active class for visibility, and wiring manual open and close logic across components.

Learn to wire a form in polymer 3 by setting up properties, handling on-change events, and building a form data object with two-way binding and submit prevention.

Save and display contacts in polymer 3 by submitting a form, preventing default, and updating the all contacts array for rendering in the contact list and favorites.

Learn to clean up a Polymer 3 app by clearing inputs with a loop and implementing delete contact by passing index to a handler and updating all contacts array.

Conclude the phonebook app by reviewing its component-based design, entering contact data (name, address, city, state, zip, phone, category), and seeing automatic rendering powered by polymer.

Learn to handle events in lit-html by binding click, mouseover, and change events, pass arguments to handlers, and create interactive buttons with alerts.