Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling 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 Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community Feature overview Quick tour
Define elements
Register an element Declare properties Instance methods Behaviors
Local DOM & styling
Local DOM Styling
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
Tools
Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services
What's new
Release notes 1.0 Migration guide About Polymer 1.0
Resources
Community Browser compatibility
API Reference
Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings

To add an instance method to your element, just add a method on the element's prototype.

Polymer({
    is: 'cat-element',
    _says: 'meow',
    speak: function() {
      console.log(this._says);
    }
});

You can invoke the method on any instance of your element.

var cat1 = document.querySelector('cat-element');
cat1.speak();
var cat2 = document.createElement('cat-element');
cat2.speak();

All Polymer elements inherit from Polymer.Base, which provides a set of useful convenience functions for instances to use.

This section summarizes some common instance methods. For a complete list of methods, see the Polymer.Base API docs.

  • $$(selector). Returns the first node in this element's local DOM that matches selector.

  • fire(type, [detail], [options]). Fires a custom event. The options object can contain the following properties:

    • node. Node to fire the event on (defaults to this).

    • bubbles. Whether the event should bubble. Defaults to true.

    • cancelable. Whether the event can be canceled with preventDefault. Defaults to false.

  • async(method, [wait]). Calls method asynchronously. If no wait time is specified, runs tasks with microtask timing (after the current method finishes, but before the next event from the event queue is processed). Returns a handle that can be used to cancel the task.

  • cancelAsync(handle). Cancels the identified async task.

  • debounce(jobName, callback, [wait]). Call debounce to collapse multiple requests for a named task into one invocation, which is made after the wait time has elapsed with no new request. If no wait time is given, the callback is called at microtask timing (guaranteed to be before paint).

  • cancelDebouncer(jobName). Cancels an active debouncer without calling the callback.

  • flushDebouncer(jobName). Calls the debounced callback immediately and cancels the debouncer.

  • isDebouncerActive(jobName). Returns true if the named debounce task is waiting to run.

  • transform(transform, [node]). Applies a CSS transform to the specified node, or host element if no node is specified. transform is specified as a string. For example:

     this.transform('rotateX(90deg)', this.$.myDiv);
    
  • translate3d(x, y, z, [node]). Transforms the specified node, or host element if no node is specified. For example:

    this.translate3d('100px', '100px', '100px');
    
  • importHref(href, onload, onerror, optAsync). Dynamically imports an HTML document.

    this.importHref('path/to/page.html', function(e) {
        // e.target.import is the import document.
    }, function(e) {
        // loading error
    });
    

    Note: To call importHref from outside a Polymer element, use Polymer.Base.importHref.

  • resolveUrl(url). Takes a URL relative to the <dom-module> of an imported Polymer element, and returns a path relative to the current document. This method can be used, for example, to refer to an asset delivered alongside an HTML import.