Tools: Support for (or way to ignore) elements declared with custom elements v0 syntax

[gabema]

I rely on several polymer based web components in my web app project. I also rely heavily on https://github.com/erikringsmuth/app-router/ for client side routing behavior. IMO it's a much better and extensible client side app router than the polymer specific app-router recommendation. However because erikringsmuth/app-router is built as a generic web component (works with Polymer, x-tag, vanilla web components) and is not a polymer specific web component it results in the following polymer lint warnings that I can find no way to work around using the polymer lint command.

warn:    /src/my-app.html:
    <app-router> is undefined.
warn:    /src/my-app.html:
    <app-route> is undefined.

I'm looking for a way to safely ignore these polymer lint warnings but have so far been unsuccessful.

[rictic]

This will get better as the community standardizes on Custom Elements v1. The analyzer does recognize native v1 custom elements, so for Polymer 2 projects there won't be any issues with depending on non-polymer elements.

In the shorter term, https://github.com/Polymer/polymer-linter/issues/60 will allow you to specify the names of elements which the linter should assume exist. We're also going to be adding comment-based directives so that you can turn off warnings on a line by line and file by file basis: https://github.com/Polymer/polymer-linter/issues/58

For a (really ugly) fix that works right now, you could add a v1 element definition that doesn't actually run at runtime:

// TODO: remove this ugly workaround once https://github.com/Polymer/polymer-linter/issues/60 is fixed.
if (false) {
  customElements.define('app-router', class extends HTMLElement {});
}

[gabema]

Any specific place the really ugly fix needs to be applied. I tried applying it in multiple locations and none of them seemed to calm the linter. Still seeing the same warnings. I'm ok with the temporary fix in order to get a successful lint run as well as knowing that it will not be an issue long term with v2 thanks to the analyzer. Thanks for the great info and attempt to work around 👍

[daKmoR]

hmm so this "really ugly" workaround is still needed?
it works for me but I was hoping it's not needed anymore...

maybe it's only the same "symptom" but I do have 2 files

MyElement.html

  /**
   * # MyElement
   *
   * @customElement
   * @demo demo/index.html
   */
class MyElement extends MyBaseElement { ... }

and

my-element.html

<link rel="import" href="./MyElement.html">
<script>
  customElements.define('my-element', MyElement);
</script>

if I now import my-element.html and use it I get an error that my-element is not defined.

If I add the workaround to MyElement.html

  /**
   * # MyElement
   *
   * @customElement
   * @demo demo/index.html
   */
class MyElement extends MyBaseElement { ... }

// TODO: remove this ugly workaround once https://github.com/Polymer/polymer-linter/issues/60 is fixed.
if (false) {
  customElements.define('my-element', class extends HTMLElement {});
}

the linter stops complaining

[kobleistvan]

This issue still exists. Linter/analyzer needs to support suppressing watnings, in-template.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.