Add test for setting properties with primitive values

[justinfagnani]

Right now primitive values are allowed to be set as either an attribute or a property. Since properties and attributes are two separate APIs, custom elements could require that a value is passed in via one API or the other. I do think it's fairly common that there are properties not set from corresponding attributes.

There should be tests that set a property to a boolean|number|string|null|undefined and requires that the property is set, not the attribute.

[robdodson]

I do think it's fairly common that there are properties not set from corresponding attributes.

Can you provide an example of a settable primitive data (string, boolean, number) property in a built-in HTML Element that does not have a corresponding attribute?

In Slack you mentioned tabindex="" versus tabIndex but those do correspond, their casing is just different.

[robdodson]

To clarify a bit more. I've tried to base the test rules on the behavior observed from the built-in elements and their reflection rules.

[justinfagnani]

Can you provide an example of a settable primitive data (string, boolean, number) property in a built-in HTML Element that does not have a corresponding attribute?

className and tabIndex are examples, but built-in elements aren't the issue here. Libraries could just use a mapping for those.

To clarify a bit more. I've tried to base the test rules on the behavior observed from the built-in elements and their reflection rules.

Custom elements don't use IDL and don't have to follow those rules. I doubt very many custom element authors even know of them. Creating an element that needs a property, and not an attribute, set is as easy as:

class FooElement extends HTMLElement {
  get foo() { return this._foo; }
  set foo(v) { this._foo = v; this.render() }
  render() {...}
}

[robdodson]

Creating an element that needs a property, and not an attribute, set is as easy as

It's true, you can do that. But I might argue that you've made a bad custom element then :P What if I need to set foo="" in my initial server response?

[robdodson]

I guess I've been trying to encourage folks to also build their custom elements so they comply with these best practices: https://developers.google.com/web/fundamentals/web-components/best-practices and I'd like to the site to help enforce that. (total aside... i need to link to those best practices from the site)

[robdodson]

Following up on this. I noticed just now that Dojo will always set string data as an attribute, even if my element only has a property defined. So I agree that we should create a test for this.