WebReflection / document-register-element

A stand-alone working lightweight version of the W3C Custom Elements specification
ISC License
1.13k stars 116 forks source link

General misunderstanding of shim use #122

Closed maikelmclauflin closed 7 years ago

maikelmclauflin commented 7 years ago

I'm pretty sure this has something to do with how I am registering the element. It happens as soon as I call define. Also, I am using es5 so if there's anything extra I need to do with the constructor before it gets passed to the shim I am all for knowing what that might be

function register(name, obj_, opts_) {
    var opts = opts_ || {};
    var obj = obj_ || {};
    var xtends = opts.extends;
    var fullname = prefix(name);
    // put the lifecycle callbacks with the methods and return the prototype
    var transformed = transform(fullname, obj, opts);
    // make sure all fn's are behind an object: { value: fn }
    var proto = wrapProperties(transformed);
    var constructor = getConstructor(xtends);
    var extendableProto = create(constructor.prototype, proto);
    HTMLSkitElement[PROTOTYPE] = extendableProto;
    var data = getData(fullname);
    data.constructor = extendableProto.constructor = HTMLSkitElement;
    Constructors[fullname] = HTMLSkitElement;
    window.customElements.define(fullname, HTMLSkitElement);
    return HTMLSkitElement;

    function HTMLSkitElement(el_) {
        return window.HTMLElement.call(el_ || this, el_ || this);
    }
}

am able to make some progress with the following code

function register(name, obj_, opts_) {
    var opts = opts_ || {};
    var obj = obj_ || {};
    var xtends = opts.extends;
    var fullname = prefix(name);
    // put the lifecycle callbacks with the methods and return the prototype
    var transformed = transform(fullname, obj, opts);
    // make sure all fn's are behind an object: { value: fn }
    var proto = wrapProperties(transformed);
    var constructor = getConstructor(xtends);
    var extendableProto = create(constructor.prototype, proto);
    extendableProto.constructor = constructor;
    var data = getData(fullname);
    var HTMLSkitElement = Constructors[fullname] = data.constructor = document.registerElement(fullname, {
        prototype: extendableProto
    });
    return HTMLSkitElement;
}

but i am still very much in the dark regarding how this behind the scene swapping is happening. I am currently running into an issue where i am resetting the html of an element in the created callback and that change is not propagating to the actual node. leaving firefox in a different state than chrome