Is there a way to transfer attributes to a concealed custom polymer element that has been imported?

Question

Is there a way to transfer attributes to a concealed custom polymer element that has been imported?

Yesterday, I was facing a challenge with custom Polymer elements:

<polymer-element name="my-custom-element" attributes="key" hidden>
  <script>
    Polymer({});
  </script>
</polymer-element>

I pondered over how to pass an attribute to my imported hidden custom Polymer element when importing it into another custom Polymer element like this:

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

I questioned whether this is achievable. If not, what would be the right approach?

javascript angularjs polymer

Answer 1

Answer №1

To successfully utilize your element, follow wirlez's guidance by importing the element's definition, creating an instance, and setting the key value as an attribute.

Here is an example:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <!-- import element definition from jsbin -->
    <link rel="import" href="http://jsbin.com/mojadu.html">
  </head>
  <body>
    <x-foo key="42"></x-foo>
  </body>
</html>

element definition

<!-- Ensure that your element imports Polymer as a dependency -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="x-foo" attributes="key" hidden>
  <template>
    <h1>Hello from x-foo</h1>
    <h2>The key is {{key}}</h2>
  </template>
  <script>
    Polymer({
      keyChanged: function(oldVal, newVal) {
        console.log('the key is', newVal);
      }
    });
  </script>
</polymer-element>

You can view this example in action on jsbin here.

If you check the console, you will see the element logging the value for key.

If you intend to manipulate the element using JavaScript in index.html, it may be necessary to wait for the polymer-ready event before doing so.

For example:

document.addEventListener('polymer-ready', function() {
  var el = document.querySelector('x-foo');
  // Perform actions involving x-foo's key
});

Answer 2

To successfully utilize your element, follow wirlez's guidance by importing the element's definition, creating an instance, and setting the key value as an attribute.

Here is an example:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <!-- import element definition from jsbin -->
    <link rel="import" href="http://jsbin.com/mojadu.html">
  </head>
  <body>
    <x-foo key="42"></x-foo>
  </body>
</html>

element definition

<!-- Ensure that your element imports Polymer as a dependency -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="x-foo" attributes="key" hidden>
  <template>
    <h1>Hello from x-foo</h1>
    <h2>The key is {{key}}</h2>
  </template>
  <script>
    Polymer({
      keyChanged: function(oldVal, newVal) {
        console.log('the key is', newVal);
      }
    });
  </script>
</polymer-element>

You can view this example in action on jsbin here.

If you check the console, you will see the element logging the value for key.

If you intend to manipulate the element using JavaScript in index.html, it may be necessary to wait for the polymer-ready event before doing so.

For example:

document.addEventListener('polymer-ready', function() {
  var el = document.querySelector('x-foo');
  // Perform actions involving x-foo's key
});

Answer 3

Answer №2

In order to pass a custom attribute, you must utilize a custom element. The "link" tag itself is not considered a custom element. To create and incorporate your own custom elements into your web application, refer to this tutorial.

If you have not done so already, it's recommended to complete the entire tutorial for a better understanding.

Update: Just importing a custom element does not mean it is being used. After importing the custom element, be sure to use the tag with specific attributes like so:

<my-custom-element key="15"></my-custom-element>

Similarly to how core-ajax is utilized:

<core-ajax
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handleAs="json"
    on-core-response="{{handleResponse}}"></core-ajax>

It appears that you may want to implement it in this manner:

<link
    rel="import"
    href="../core-ajax/my-custom-element.html"
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handleAs="json"
    on-core-response="{{handleResponse}}"></link>

Unfortunately, this approach is not compatible with Polymer!

Answer 4

In order to pass a custom attribute, you must utilize a custom element. The "link" tag itself is not considered a custom element. To create and incorporate your own custom elements into your web application, refer to this tutorial.

If you have not done so already, it's recommended to complete the entire tutorial for a better understanding.

Update: Just importing a custom element does not mean it is being used. After importing the custom element, be sure to use the tag with specific attributes like so:

<my-custom-element key="15"></my-custom-element>

Similarly to how core-ajax is utilized:

<core-ajax
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handleAs="json"
    on-core-response="{{handleResponse}}"></core-ajax>

It appears that you may want to implement it in this manner:

<link
    rel="import"
    href="../core-ajax/my-custom-element.html"
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handleAs="json"
    on-core-response="{{handleResponse}}"></link>

Unfortunately, this approach is not compatible with Polymer!

Answer 5

Answer №3

If we consider this as your polymer file:

<polymer-element name="my-custom-element" attributes="key" hidden>
      <script>
        Polymer({});
      </script>
    </polymer-element>

and here is the link importing the file in your html:

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

There are a few approaches to achieve what you are asking for...

If you want to generate that value dynamically, then one way is to create a constructor for the custom element like this:

<polymer-element name="my-custom-element" constructor='MyCustomElement' attributes="key" hidden>
          <script>
            Polymer({});
          </script>
        </polymer-element>

Afterward, you can instantiate such an element within the code of the polymer element, for example:

var custom =  new MyCustomElement();

Insert this element into your DOM like so:

var dom = document.querySelector('otherElement'); //depends on scope
dom.appendChild(custom);
custom.setAttribute('attribute', value);

or
this.$.elementID.appendChild(custom);
custom.setAttribute('attribute', value);

I hope this aligns with what you need. Cheers!

Answer 6

If we consider this as your polymer file:

<polymer-element name="my-custom-element" attributes="key" hidden>
      <script>
        Polymer({});
      </script>
    </polymer-element>

and here is the link importing the file in your html:

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

There are a few approaches to achieve what you are asking for...

If you want to generate that value dynamically, then one way is to create a constructor for the custom element like this:

<polymer-element name="my-custom-element" constructor='MyCustomElement' attributes="key" hidden>
          <script>
            Polymer({});
          </script>
        </polymer-element>

Afterward, you can instantiate such an element within the code of the polymer element, for example:

var custom =  new MyCustomElement();

Insert this element into your DOM like so:

var dom = document.querySelector('otherElement'); //depends on scope
dom.appendChild(custom);
custom.setAttribute('attribute', value);

or
this.$.elementID.appendChild(custom);
custom.setAttribute('attribute', value);

I hope this aligns with what you need. Cheers!

Is there a way to transfer attributes to a concealed custom polymer element that has been imported?

Answer №1

Answer №2

Answer №3

Similar questions

Angular ng-bind-html directive allows you to bind HTML content to an

Ways to incorporate a dynamic value into a chart created with chart.js?

Ways to access states from a Vuex store within a Vuetify list in VueJs

What is the proper method for extracting solely pertinent JSON information from this particular web service?

How can Angularjs code be properly enclosed within a closure?

Compose a tweet using programming language for Twitter

HTML code featuring multiple dropdown menus, each equipped with its own toggleable textarea

Centering Dynamic Text Vertically in Adobe Animate using Javascript

The deployment of the Fire-base Cloud Function was successful and error-free. However, the function does not appear to exist in the Firebase system

What alternatives can I consider to reduce the dependency on watchers in my controller?

Changing the opacity of the background when a Bootstrap modal is displayedHere's how you can

Utilizing Vue JS methods to control a div element

Ways to show dynamic text according to slider adjustments

404 error occurs when AngularJS removes hash symbol from URLs

The onClick event for "history.go(0)" is functional in Internet Explorer, but it does not work in Mozilla Firefox. What can be done to address this problem specifically for Mozilla browser?

What purpose does "Phaser.Display.Align.In.Center" serve when we already have the function `setOrigin` available?

The ng-view in index.html is not being loaded by AngularJS

Verifying that users have chosen an option from a drop-down menu

Is it possible for jQuery to detect if an email was sent from the client's email account?

"How can I make a dropdown open and close when a button is clicked, but also close when clicking outside of it at the same