CODEWITHSUNDEEP
polymer-2.x
Tibate
Tibate

Reputation: 11

Component not displaying on web

I'm adding a new web page to my app using polymer2. I've already done similar adds before but this one really does not show on the page even tho i have the imports and the components ready... I'm starting to have some headaches watching my code trying to find what is wrong so maybe some of you will find the error instantly.

As i said before i've already implemented other pages on the app using the Maybe the problem comes from the "lazy import" of my new component but it worked fine for the other previously added components.

i tried to look for misspelled DOM or components but everything looks fine

This is the menu from which i go to the other pages

<!-- i import the components like that -->
<link rel="lazy-import" href="c2m-connexion.html">
<link rel="lazy-import" href="c2m-newPage.html">

<app-drawer-layout id="drawerLayout" force-narrow>
        <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
          <app-toolbar>Menu</app-toolbar>
          <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
            <div id="anonyme">
              <a name="connexion" href="[[rootPath]]connexion">Connexion</a>
              <a name="newPage" href="[[rootPath]]newPage">New Page !!</a>
            </div>

<!--[... Some other pages in the menu ...]-->

 <div id="top ">
      <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404 " role="main ">
        <c2m-connexion name="connexion"></c2m-connexion>
        <c2m-newPage name="newPage" subroute="{{subroute}}"></c2m-newPage>
        <!-- other pages implemented the same way-->
      </iron-pages>
 </div>

i use this script cause all my files have a normalised name :

  // Load page import on demand. Show 404 page if fails
        let resolvedPageUrl = this.resolveUrl('c2m-' + page + '.html');
        Polymer.importHref(
          resolvedPageUrl,
          null,
          this._showPage404.bind(this),
          true);
      }

Now the component itself (c2m-newPage) : 

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="./components/sweet-alert.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="./services/c2m-service.html">
<link rel="import" href="components/c2m-menu-newPage.html">



<dom-module id="c2m-newPage">
    <!-- Defines the element's style and local DOM -->
    <template>
        <link rel="stylesheet" href="../style/main.css">
        <link rel="stylesheet" href="../style/util.css">
        <style is="custom-style" include="shared-styles">
            :host {
                display: flex;
                padding: 9px;
            }
            paper-input#email-input {
                width: 50%;
            }
            .card-content paper-dropdown-menu {
                width: 100%;
            }

        </style>

        <!-- I TRIED PUTTING SOME TEXT HERE ASWELL TO SEE IF THE COMPONENT WAS LOADING BUT NOTHING APPEARED -->

        <c2m-menu-newPage></c2m-menu-newPage>
        <!-- Services -->
        <c2m-service id="service"></c2m-service>
    </template>
    <script>
        class C2mNewPage extends Polymer.Element {
            /**
             * @inheritdoc
             **/
            connectedCallback() {
                super.connectedCallback();
            }
            static get is() {
                return 'c2m-newPage';
            }
        }
        customElements.define(C2mNewPage.is, C2mNewPage);
    </script>
</dom-module>

i expect the page to show something, at this point the text i tried to put didn't even show and i think if i put a

some text

it is supposed to appear on the page. So i don't know where it comes from.

Thanks for the answers !

Upvotes: 1

Views: 32

Answers (1)

Thomas Oomens
Thomas Oomens

Reputation: 101

Renaming the element to c2m-new-page probably solves your problem.

Polymer does not go well with capitals, since your element has the name 'c2m-newPage' it probably can't be found when used in the dom, since it searches for an element with lower letters or with the Capital replaced by a dash-lowercase.

Upvotes: 1

Related Questions