passing parameter/input data to custom elements in javascript

Question

I'm trying to implement the same code of this using JavaScript, so wrote the below code as btn.js file:

// Create a new object based of the HTMLElement prototype
var SaveBtn = Object.create(HTMLElement.prototype);

// Set up the element.
SaveBtn.createdCallback = function() {
// Create a Shadow Root
var shadow = this.createShadowRoot();
this.type='button';

// Add an event listener to the image.
this.addEventListener('click', function(e) {
    alert('got a click');
    document.getElementById("ShowButton").value= "Hide Filter";
 });
};

// Register the new element.
var Xbtn =document.registerElement('save-button', {
prototype: SaveBtn,
extends: 'input'
});

and called it in the other function main.js as below:

window.addEventListener("load", onLoad, false);

 function onLoad() {
     var host = document.querySelector('#host');
     var el = new Xbtn();
     host.appendChild(el);
 }

this worked fine, and gave me blanket button.

now I want to pass the 'text' to be displayed into the button, I tried the below:

in the index.html I've:

  <div id="host"></div>

 <input  id="ShowButton" type="button" value="Show Filter"/>

in main.js:

el.value = 'click me';

and in the btn.js:

this.value = this.getAttribute('text');

but failed, and the button still empty! considering that the other button value is changed upon the click

any thought?

Why do you expect `el.text` to show test on the button? That doesn't work for a normal button, so it doesn't work for your custom button. Note that a correct property like `innerHTML` or `textContent` won't work either, because your custom button holds a shadow DOM root, which appears to eclipse normal DOM content. Since you don't actually use the shadow DOM for anything, it's not clear to me whether you actually want to put the text inside of the shadow DOM or put the shadow DOM inside a nested element within the button. — apsillers, Dec 15 '14 at 14:17
thanks @apsillers, I updated the code to show how normal button value/text can be changed, I want to do same with my custom button, I need to put the text inside the shadow DOM. — Hasan A Yousef, Dec 15 '14 at 14:34

score 3 · Accepted Answer · edited Sep 05 '15 at 18:10

The shadow DOM root is only accessible within the function-scope it is defined. You either need to assign the shadow DOM root object to an outer-scope variable, or you need to expose an in-scope function that manipulates the shadow DOM. Since you want to manipulate the shadow DOM for multiple elements, a setter function on each instance is the best option.

You can expose the shadow DOM entirely:

SaveBtn.createdCallback = function() {
    var shadow = this.createShadowRoot();
    this.myShadow = shadow;
    //...
}

...

el.myShadow.textContent = "click me";

However, since a major feature of the shadow DOM is being able to hide DOM components from manipulation by other scripts, you may instead wish to have a setter function that (for example) validates input and performs the manipulation internally:

SaveBtn.createdCallback = function() {
    var shadow = this.createShadowRoot();

    this.setShadowText = function(text) {
        shadow.textContent = text;
    }
    //...
}

...

el.setShadowText("click me");

thanks a lot @apsillers, that's solved it for me, I'll use the setter function. — Hasan A Yousef, Dec 15 '14 at 15:03
Hi again @apsillers, I want to ask, can I add template for my code above? — Hasan A Yousef, Dec 15 '14 at 15:29

passing parameter/input data to custom elements in javascript

1 Answers1

Linked