Polymer Logo Home Guides Feature overview Try Polymer Install Polymer 3.x Tutorial: Build an element 1. Get set up 2. Add shadow DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties About this release What's new in 3.0 Upgrade guide Release notes Custom elements Custom element concepts Define an element Declare properties Working with legacy elements Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Browser support Overview Polyfills ES6 and modules Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements polymer.json specification Node support Build apps Overview App templates Build for production Serve your app The PRPL pattern Service worker Reference Glossary Global settings API Reference index polymer-element.js Elements array-selector.js custom-style.js dom-bind.js dom-if.js dom-module.js dom-repeat.js Mixins dir-mixin.js disable-upgrade-mixin.js element-mixin.js gesture-event-listeners.js mutable-data.js properties-changed.js properties-mixin.js property-accessors.js property-effects.js strict-binding-parser.js template-stamp.js Utils array-splice.js async.js case-map.js debounce.js flattened-nodes-observer.js flush.js gestures.js html-tag.js mixin.js path.js render-status.js resolve-url.js settings.js style-gather.js telemetry.js templatize.js Legacy class.js legacy-data-mixin.js legacy-element-mixin.js mutable-data-behavior.js polymer-fn.js polymer.dom.js templatizer-behavior.js

The Polymer library is in maintenance mode. For new development, we recommend Lit.

Contents

AMD modules are loaded by a web browser using a small library. This means AMD modules can be used with browsers that don't support native ES modules. You can configure your Polymer CLI build settings to convert ES modules to AMD modules.

In a progressive web app, the app shell contains the CSS, HTML and JavaScript that implements the UI framework common to the whole app. This can include headers, footers, menus and routing logic. It excludes any functionality that is specific to a route. As such, the app shell contains the code that surrounds the rest of the content.

The Polymer CLI is designed to work with apps that use an app shell architecture. See Instant Loading Web Apps with an Application Shell Architecture for more information.

Bower is a package manager for web projects. Bower automates the installation of packages like custom elements and JavaScript libraries. Polymer 1.x and 2.x distribute their core library and elements via Bower. See bower.io for more information.

In Polymer 3.0, npm replaces Bower as a package manager.

Bundling concatenates an app's scripts and resources to reduce the number of network requests it takes to load dependencies.

By contrast, if both server and browser support HTTP/2 (a newer protocol that permits concurrent resource requests), it can be acceptable to leave resources unbundled. Unbundled builds permit lazy loading of dynamic dependencies. By default, Polymer apps are unbundled.

dependency may refer to:

  • A package dependency, such as an npm package that your project uses.
  • A specific resource that is required by another, such as HTML files or JavaScript libraries. See also: dynamic dependency, static dependency, transitive dependency.
  • A data dependency in the context of the Polymer data system: a piece of data that an observer, computed property or computed binding depends on.

A dynamic JavaScript import() statement loads a module. In contrast to static import statements, dynamic imports load based on code execution, and can take a computed string.

The Polymer 3.0 build tools will find your dynamic imports and include them in your build if you use string literals to identify them.

Eager loading refers to the process of loading dependencies statically, rather than on demand. Compare lazy loading.

entry point

The HTML actually loaded by the browser to start the application. Usually index.html. In an application built with an app shell architecture, the entrypoint is loaded for many different URLs.

ECMAScript. A specification created to standardize JavaScript.

ES5 and ES6 (ES2015) are editions of ECMAScript; ES6 adds features to ES5, such as imports.

The Web Components standards and the Polymer library are based on ES modules, a JavaScript feature added in ES6. Unlike AMD modules, which must be loaded with a library, ES modules are available natively in modern browsers. You can configure the Polymer CLI build tools to compile your code so that older browsers can still run your app.

ES modules use JavaScript import to load bindings that have been exported by another ES module. Polymer uses ES modules to package the features of the Polymer library and load their dependencies.

Fragments are resources, such as custom element definitions, that are only loaded if the user follows a route that requires them. Fragments can be used by a bundler to identify resources that should be packaged together.

A distributed version control system.

A streamed JavaScript task runner that can be used to set up a custom build process using the polymer-build library.

The JavaScript import statement loads an ES module. Polymer 3.0 uses import statements to load the Polymer library, utilities and elements. import is an ES6 feature.

Lazy loading takes advantage of routing to load elements only when they are required for render. Used correctly, lazy loading can improve performance.

For an example implementation of lazily-loaded elements, see the Shop app. In the Shop app, views are elements which are instantiated only when they are routed to.

A linter analyzes source code and warns you about possible errors. Polymer CLI includes Polymer Linter.

A monolithic app is one that loads all of its code statically and does not use an app shell architecture or dynamic code loading.

An environment for writing JavaScript applications and server-side code. Works with a package manager, npm. Polymer CLI and the Polymer Elements are built on Node. For more information, visit nodejs.org.

npm is a package manager for Node.js. The Polymer library and core elements are distributed via npm.

A metadata file used by npm to manage project dependencies.

A command line tool for Polymer projects. Polymer CLI has a number of tools for working with Polymer and Web Components. For more information, see the Polymer CLI documentation.

Polymer CLI command. Takes a build configuration from command line options, or from a polymer.json file, and packages your app for deployment on a web server.

polymer build is a convenient wrapper for the polymer-build library. Use the polymer-build library itself if you need greater customization of your build process.

Initializes a Polymer project. Contains a set of starter templates for elements and apps.

Calls npm install.

Calls polymer-linter to analyze your code for potential problems.

This command starts polyserve, a simple development server for Web Components.

Runs tests for your Polymer app with web-component-tester.

A static analysis tool for Web Components. Used by the tools in Polymer CLI to parse your code. For more information, see the README.

polymer-build is a library for building Polymer projects. polymer-build allows you to completely customize your build process and integrate it with other tools. For more information, see the the README.

Polymer build tool that follows HTML Imports and <script> tags to concatenate resources into a single page for production. Can improve performance by reducing network trips.

Linter invoked by polymer lint command. Warns you about potential problems in your Polymer code-for example, data binding with a property that doesn't exist, or using deprecated CSS selectors. For more information, see the README.

Configuration file. Sets options for how Polymer CLI tools should interact with your project, and defines the output of the polymer build command. Use polymer.json to create one or more build configurations, and to specify the locations of source files, data files, and extra dependencies.

A progressive web app (PWA) is a reliable, fast web site that works seamlessly on mobile, tablet and desktop. A PWA has the look-and-feel of a native application and delivers content when offline, but is served over HTTPS via any modern web browser.

Routing is the process an app uses to determine how to respond to a client request for a particular endpoint. A default route is the endpoint the app directs the user to when no route is specified. In a progressive web app, the app shell performs routing.

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync.

For progressive web applications, a service worker can help to make an application usable offline in a meaningful way. For example, on first accessing a particular site, a service worker could fetch a defined set of resources and cache them. Then, the service worker could act as a client-side proxy, intercepting network requests for resources. Where possible, the service worker could supply those resources from the browser cache.

A dependency that is required by a given file, and whose import is hard-coded using syntax like <link rel="import"> or <script src="...">. This dependency will always be loaded when the given file is loaded.

A transitive dependency is an indirect dependency - that is, a resource that is depended on by another dependency.

For example, if file A depends on file B, and file B depends on file C, then file C is a transitive dependency of file A.

The transitive dependencies of a resource are all the dependencies, direct and indirect, that a resource depends on.

A browser-based testing environment for web components. Runs your tests in local browsers or remotely via Sauce.