Questions tagged [polymer]

The Polymer library provides a set of features that make it easy and fast to make custom elements that work like standard DOM elements.

Polymer is an open source project led by the Google team. Its purpose is to implement the set of W3C specifications dealing with web components into an open source library and architecture suitable for creating and enabling reusable widgets (called web components) in modern web applications.


Example code

Simple Example:

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-tag">

  <template>
    <style>
      /* CSS rules for your element */
    </style>
    <!-- local DOM for your element -->
    <p>This is my custom Tag</p>
  </template>

  <script>
    // element registration
    Polymer({
      is: 'my-tag'
    });
  </script>
</dom-module>

Using it in another document:

<!-- Add the <link> tag in the head of your markup -->
<link rel="import" href="bower_components/my-tag/my-tag.html">

<!-- Use your new tag anywhere in the document, which
     as you expect results in "This is my custom Tag" -->
<my-tag></my-tag>

Useful resources:

8272 questions
528
votes
10 answers

What is the difference between Polymer elements and AngularJS directives?

On the Polymer Getting Started page, we see an example of Polymer in action:
Dan Kanze
  • 18,485
  • 28
  • 81
  • 134
93
votes
5 answers

Paper-Button always as upper case

I am using Paper-Button but I am facing issue that the button text always gets capitalized instead or normal case. I do not see any CSS or Javascript property being applied to make it upper case. How should I resolve this problem?
Ajay Beniwal
  • 18,857
  • 9
  • 81
  • 99
85
votes
1 answer

What do /deep/ and ::shadow mean in a CSS selector?

In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools: I've also seen a selector with pseudo selector ::shadow. So, what do /deep/ and ::shadow in a CSS selector mean?
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
55
votes
1 answer

Do Custom Elements require a dash in their name?

Is it possible to name your own custom elements , , or others without the use of a dash? Can use define elements without them?
addyo
  • 2,798
  • 1
  • 14
  • 21
52
votes
1 answer

Polymer element with javascript dependencies

I've created a Polymer element for rendering markdown which uses the marked.js library. I was wondering, what is the recommended way of loading in its dependencies? Should I just use a script tag? Or…
robdodson
  • 6,616
  • 5
  • 28
  • 35
49
votes
3 answers

Can ES6's module loader also load assets (html/css/...)

ES6's modules are based on a flexible loader architecture (although the standard is not final, so ...). Does this mean ES6's loader, based on system.js, can load all assets? I.e. CSS, HTML, Images, Text, .. files of any sort? I ask because I'm…
backspaces
  • 3,802
  • 6
  • 34
  • 58
47
votes
0 answers

Pros and Cons of Facebook's React vs. Web Components (Polymer)

What are the main benefits of Facebook's React over the upcoming Web Components spec and vice versa (or perhaps a more apples-to-apples comparison would be to Google's Polymer library)? According to this JSConf EU talk and the React homepage, the…
CletusW
  • 3,890
  • 1
  • 27
  • 42
43
votes
7 answers

Is it possible to use Polymer inside of React?

I have been using React and look to use Polymer tags inside of React. React does not recognize Polymer tags as React only handles basic DOM tags. Is there a way to add the Polymer tags to React DOM library?
Vu Dang
  • 721
  • 1
  • 7
  • 11
42
votes
2 answers

generic throw giving Expected an object to be thrown lint error

Below throw code giving lint error Expected an object to be thrown no-throw-literal throw { code : 403, message : myMessage }; if i try throw new Error, i am not getting eslint but it gives [Object Object] in the response. throw new Error({ code :…
Munna Babu
  • 5,496
  • 6
  • 29
  • 44
40
votes
1 answer

How to safely load Polymer in unknown environment - multiple versions or namespace?

I have elements built with Polymer which needs to run on multiple sites (a widget) which: Don't have Polymer included (fine, I can include) Polymer already included at a compatible version (brilliant, unlikely) Polymer at an unknown version (too…
Adam Heath
  • 4,703
  • 2
  • 35
  • 50
39
votes
8 answers

Polymer 1.0: How to pass an argument to a Polymer function from an attribute?

Is there a way to pass an argument to a Polymer function from an element attribute inside its