How to pass attributes from a React component to a web-component?
15:42 24 Feb 2017

I have the following web-component:

(function() {
    var helloProto = Object.create(HTMLElement.prototype);

    helloProto.createdCallback = function() {
        var val = this.getAttribute('data-text') || 'stranger';
        val = val.toUpperCase();    
        this.innerHTML = 'Hello, ' + val + '.';
    };

    document.registerElement('hello-el', {
        prototype: helloProto
    });
})();

Which is called like this from the render function of a React component:


The problem is that this.getAttribute('data-text') returns undefined ? Why ?

reactjs web-component