CODEWITHSUNDEEP
ruby-on-railspolymerweb-component
Toby 1 Kenobi
Toby 1 Kenobi

Reputation: 5035

my custom elements don't work in Rails 4.2 with polymer-rails

Using the polymer-rails gem with Rails 4.2 I am able to use the predefined polymer elements such as the paper element set and the iron element set.

However when I make my own elements they are not rendered.

E.g. I created an element with this command

rails g polymer:component testing

and I left it untouched

/app/assets/components/testing/testing.html looks like this:

<dom-module id="testing">
  <link rel="stylesheet" href="testing.css" />
  <template>

    <h2>Testing</h2>
  </template>

  <script src="testing.js"></script>
</dom-module>

/app/assets/components/testing/testing.js looks like this:

Polymer({
  is: "testing"
});

/app/assets/components/application.html.erb has this:

//= require polymer/polymer
//= require paper-styles/paper-styles
//= require iron-icons/iron-icons
//= require paper-tooltip/paper-tooltip
//= require easy-paper-tabs/easy-paper-tabs
//= require testing/testing

the <head> of /app/views/layouts/application.html.erb is this:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title><%= full_title(yield(:title)) %></title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
  <%= csrf_meta_tags %>
  <%= favicon_link_tag %>
  <%= html_import_tag 'application', 'data-turbolinks-track' => true %>
</head>

When I put the tag <testing></testing> into a view I expect to see the h2 heading "Testing", but I don't. Instead nothing is rendered there. When I inspect the page I just see the empty tag <testing></testing>.

What am I missing?

I've tried putting the <testing></testing> tag into different views

I've tried replacing <%= html_import_tag 'application', 'data-turbolinks-track' => true %> with <%= html_import_tag 'application' %> in /app/views/layouts/application.html.erb

I've tried putting the custom component into /vendor/assets/components/testing/ instead of /app/assets/components/testing/

For each thing I tried I restarted the server.

Upvotes: 0

Views: 129

Answers (1)

Toby 1 Kenobi
Toby 1 Kenobi

Reputation: 5035

I noticed the console logged an error that said

Failed to execute 'registerElement' on 'Document': Registration failed for type 'testing'. The type name is invalid.

so I googled it and found that the web-components spec bizarrely requires all user-created elements to have a hyphen in their name! There's not much documentation about this - it's like secret knowledge.

Putting a hyphen in the name of the element fixes my problem.

Upvotes: 0

Related Questions