WebIDL: Support the HTMLConstructor attribute

[alexcrichton]

Right now we're not processing it which means a lot of types don't have constructors!

There may be some assorted constructor attributes that also need special handling as well, will require some investigation.

[ohanar]

So the WebIDL spec doesn't specify the HTMLConstructor anywhere. Is there anything special about these constructors?

[alexcrichton]

Perhaps not! It sounds like we may be able to treat it as a normal constructor perhaps? (I'm not too knowledgeable of what it is either!)

[fitzgen]

I am confused

[fitzgen]

https://html.spec.whatwg.org/multipage/dom.html#htmlconstructor

[alexcrichton]

Interesting! Does that mean that there's nothing actually to do here?

[fitzgen]

I think so. I find that series of steps somewhat impenetrable. I tried a bunch of things, and I couldn't get anything that wouldn't throw an error.

[alexcrichton]

Ok cool!

[Pauan]

I believe they just exist so that custom elements can work:

class Foo extends HTMLDivElement {
    ...
}

My understanding of the spec is that new HTMLDivElement() and HTMLDivElement() should both throw errors.

So indeed they cannot be created directly (only indirectly by creating a new class that extends from them).

[fitzgen]

I tried with custom elements that extend HTMLElement and HTMLDivElement and couldn't get it to work. I could be doing it wrong, but in this scenario it also seems like rust code wouldn't be calling the html element constructors explicitly anyways. If you can find a snippet that shows what is supposed to be going on, and works, then we can definitely reopen!

…

On Fri, Aug 3, 2018, 10:06 PM Pauan ***@***.***> wrote: I believe they just exist so that custom elements <https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements> can work: class Foo extends HTMLDivElement { ... } My understanding of the spec is that new HTMLDivElement() and HTMLDivElement() should both throw errors. So indeed they cannot be created directly (only indirectly by creating a new class that extends from them). — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#621 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEjSxmX69Eu14Myb3usbVF5eywp1820ks5uNSvdgaJpZM4VtYLB> .

[Pauan]

@fitzgen

class Foo extends HTMLDivElement {
    // Returns which attributes should be observed.
    // (This isn't needed if you don't care about attribute changes)
    static get observedAttributes() {
        return ["bar"];
    }

    // Called when the element is constructed (either via HTML or document.createElement).
    constructor() {
        super();
        console.log("Created!");
    }

    // Called when inserting into the DOM.
    // (This also includes when the DOM node is moved within the same Document)
    connectedCallback() {
        console.log("Connected!");
    }

    // Called when removing from the DOM.
    // (This also includes when the DOM node is moved within the same Document)
    disconnectedCallback() {
        console.log("Disconnected!");
    }

    // Called when moving to a different Document.
    adoptedCallback() {
        console.log("Adopted!");
    }

    // Called when one of the observedAttributes changes.
    attributeChangedCallback(name, oldValue, newValue) {
        console.log("Attribute changed!", name, oldValue, newValue);
    }
}

// This assigns our class to an HTML name (in this case `my-foo`).
// It is mandatory for the HTML name to include a dash (it cannot be called just `foo`).
//
// The "extends" is necessary because we are extending from HTMLDivElement.
// If we weren't extending from a built-in HTML element then we wouldn't need "extends".
customElements.define("my-foo", Foo, { extends: "div" });

// Rather than using document.createElement, you can instead use <div is="my-foo"></div>
// in HTML, which does the same thing.
//
// This special "is" stuff is needed because we're extending a built-in HTML element.
// If we weren't extending a built-in HTML element then we would use one of these instead:
//
//     document.createElement("my-foo")
//     <my-foo></my-foo>
const my_foo = document.createElement("div", { is: "my-foo" });

document.body.appendChild(my_foo);
document.body.appendChild(my_foo);

my_foo.setAttribute("bar", "qux");

This is only relevant after wasm-bindgen gets the ability to create JS classes in Rust.

[Pauan]

If it's still not working for you, try Chrome. MDN has this big disclaimer:

Note: Custom elements are supported by default in Chrome and Opera. Firefox is very close; they are currently available if you set the preferences dom.webcomponents.shadowdom.enabled and dom.webcomponents.customelements.enabled to true. Firefox's implementation is planned to be enabled by default in version 63/64. Safari so far supports only autonomous custom elements, and Edge is working on an implementation as well.

[fitzgen]

Woops, yeah I was only trying in Firefox.

I think we can reopen this, but that it should not block Rust 2018 / Release Candidate.