Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using LitElement styles is considered as a property #213

Open
NeilujD opened this issue May 18, 2021 · 5 comments
Open

Using LitElement styles is considered as a property #213

NeilujD opened this issue May 18, 2021 · 5 comments

Comments

@NeilujD
Copy link

NeilujD commented May 18, 2021

I am working on a POC on my own and it seems like web-component-analyzer is considering static styles as a component property.

Example:

my-element.ts

...
@customElement('my-element')
export class MyElement extends LitElement {
    static styles = css`
        :host {
            display: block;
        }
    `
...

custom-elements.json

...
"properties": [
    {
        "name": "styles",
        "type": "CSSResultGroup",
        "default": "\"css`\\n        :host {\\n            display: block;\\n}\\n    `\""
    },
...

I am using web-component-analyzer 1.1.6 .

@NeilujD
Copy link
Author

NeilujD commented May 18, 2021

I've found out that declaring the styles property thought a getter solve my issue.
Still I think this should be cover by default.

Example:

my-element.ts

...
@customElement('my-element')
export class MyElement extends LitElement {
    static get styles() {
        return css`
            :host {
                display: block;
            }
        `;
    }
...

@blikblum
Copy link

blikblum commented Nov 6, 2021

The same for defining properties static property as a class field

I had to change from

class PatientList extends LitElement {
  static properties = {
     patients: { type: Array, attribute: false },
  }
}

to

class PatientList extends LitElement {
  static get properties() {
    return {
      patients: { type: Array, attribute: false },
    }
  }
}

@davidmaxwaterman
Copy link

Is using a getter() a work-around, or is it there a way to exclude specific properties that are known to not be in the API?

@muratcorlu
Copy link

I'm also staggering with this. Do we really need to convert styles to a getter just for hiding it from web components definition?

@oliveryasuna
Copy link

Persists on 2.0.0-next.4.

A workaround would be to implement a new feature flag for @prop. Then, we could enable that and not member.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants