can i pass function as attribute to web component?

Question

I\'m trying to create a native web component for input element. I wanted the component to have custom validation functionality, similar to polymer\'s paper-input custom validato

Answer 1

It is best to pass in the function through a property since all attributes are strings.

If you must pass it in as an attribute then you would need to convert that string into the function. The problem then become the scope of that function.

If you assume that the function is global in scope then you can use the string as a property name of the window object. TO execute the code you could do this:

window[fnName]();

But that is pretty limiting since you might want to call a member function of your own class or object.

You could use a dot notation in the name like func="myObj.fnName()" and if you are not worried about the warnings of using eval you could just do something like this:

eval(el.getAttribute('func'));

Of course that leaves you open for all kinds of possible injection attacks. But, then again so does the img tag and the script tag.

You could try to be safer and do this:

Set the attribute without the ():

`func="myObj.fnName"`

Your code that attempts to make the call would look like this:

var parts = el.getAttribute('func').split('.');
var obj = window;
var found = parts.some( part => {
  var next = obj[part];
  if (next) {
    obj = next;
    return true;
  }
});

if (found) {
  obj();
}

But this also prevents you from passing in any parameters.

This complexity is exactly why things like AngularJS, React, Vue, etc exist. This is also the reason why I avoid passing in a function through an attribute.

If you pass it in through a property then you code can look like this:

el.callme = globalfunc; // or
el.callme = this.localFunc; // or
el.callMe = (some params) => { /* do something */ };

Or anything else you want.

EVENTS

Now having said all of that I would also suggest doing what most of the native components do. That is to dispatch an event when something needs to be done, or when something changes and the outside world might be interested in those changes.

In you element you just call

this.dispatchEvent(new CustomEvent('event name', {bubbles: true, detail: {your detail}});

Then anyone that cares about your event will listen for it.