Attributes with a hyphen do not reflect to LitElement property about lit-element HOT 14 CLOSED

We elected not to support this automatic dash to camel case conversion from PolymerElement in LitElement because it was generally non-platform-y. Instead, lowercase attributes are automatically mapped to the correctly cased property which is what the platform itself does for properties like tabIndex.

This behavior can be customized by importing camelToDashCase from Polymer implementing

static attributeNameForProperty(property) {
  return camelToDashCase(property);
}

Can this decision still be challenged? This fundamentally limits the cross-compatibility with other frameworks like Vue.js which is kind of a bad thing for a web-component-focused framework, isn't it?

from lit-element.

LitElement is about as vanilla as it gets, it is not trying to invent anything already present in the platform. It just adds a few things missing. There are even spec proposals like Template Instantiation, making lit-html even smaller - and making all of this just a tiny bit of convenience.

This is the future of Polymer as well, removing as much of the custom stuff as possible, and what turned out to not make sense, and just use the platform as much as possible, now that it is actually possible to do so.

Expect a lot of the "magic" from Polymer not to be present in LitElement, like reflection, computed values etc

from lit-element.

Doesn't JavaScript already do kebab-case conversion for things like z-index? I'm not sure spec-wise what difference there is between attribute values (and if this is specifically just for element.styles) and attribute keys.

I'm also thinking actually the hyphenated attribute data-* creates its own DOMStringMap which is reflected on the element.dataset property. Further hyphens are converted to camelCase:

<my-element data-some-attr="foo"></my-element>

element.dataset.someAttr

I think this is somewhat of an outlier since data- doesn't map exactly to element.data.*, but would it be too much to reflect hyphenated properties to a DOMStringMap and camelCase after the first instance of the hyphen?

class MyElement extends LitElement {

    static get properties() {
        return {
            foo: { type: DOMStringMap },
        };
    }

    connectedCallback() {
        super().connectedCallback();
        this.foo.barBaz;  // baz

        // or perhaps a simple Map which doesn't require any conversion.
        this.foo.get('baz-bar'); // bar
    }

    render() {
        return html`<my-element foo-bar-baz="foo" foo-baz-bar="buzz"></my-element>`
    }
}

from lit-element.

You can observe the attributes using static get observedAttributes() {return [ "my-name"]}

Then update the properties in

attributeChangedCallback(name, oldValue, newValue) {
  this[name] = newValue;
}

If name is then created as a lit element property, it will automatically re-render

from lit-element.

We elected not to support this automatic dash to camel case conversion from PolymerElement in LitElement because it was generally non-platform-y. Instead, lowercase attributes are automatically mapped to the correctly cased property which is what the platform itself does for properties like tabIndex.

This behavior can be customized by importing camelToDashCase from Polymer implementing

static attributeNameForProperty(property) {
  return camelToDashCase(property);
}

from lit-element.

From this comment it seems like this was intentional: kenchris/lit-element#15 (comment)

from lit-element.

so, if I name a property with the name my_name or myName or MyName .... how do I reflect that to the attribute: my-name ?

from lit-element.

@mustafaekim There is no need to reflect it... if you really need to you can set attribute yourself manually via setAttribute. There is no automatic attribute reflection in LitElement.

from lit-element.

OK, reflection may not be a good idea, I am not sure. However I want to re-ask the same question like, I want to initialize my lit-element with some value set via attributes. for instance: <my-element my-name="Mustafa"> and I want the property myName, MyNAme or my_name to be set accordingly. Where is the link between those?

from lit-element.

OH ok, just vanilla web-component. that's good. I am a little bit confused among vanilla, polymer and lit-element

from lit-element.

OK thanks, I like the direction, just a little bit confused about the APIs

from lit-element.

@mustafaekim From my usage experience, <my-element myName="Mustafa"> works fine with property myName. But the attributes won't actually appear in the DOM.

from lit-element.

@ernsheong true, but for sharable components you most likely want to support attributes as well.

from lit-element.

This codes works in lit-element 2.0.1:

import camel2Dash from '../lib/camel2Dash'
class MyElement extends LitElement {
  public static _attributeNameForProperty(name, options) {
    return super._attributeNameForProperty(camel2Dash(name), options)
  }
  // ...

camel2Dash method (typescript):

export default (str: string): string => {
  return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
}

the camel2Dash method might not be perfect but it works well for me, i found it here: https://gist.github.com/youssman/745578062609e8acac9f#gistcomment-2304728

here is the method implementation from the lit-element source code: https://github.com/Polymer/lit-element/blob/master/src/lib/updating-element.ts#L360

from lit-element.