Polymer using webcomponents.js instead of webcomponents-lite.js breaks app

Question

Hi I am trying to vulcanize my app but using webcomponents-lite.js doesnt seem to polyfill correctly and reading up I found a suggestion that says to use webcomponents.js, problem there is when I use that i get these errors:

Unable to get property 'mousedown' of undefined or null reference Unable to get property 'click' of undefined or null reference

and thats if I vulcanize or not. Must say I am having more issues using Polymer than I think I should. Works no problem with Chrome but other browsers fight me at every turn.

here is my index.html:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="elements/elements.html">
        <link rel="import" href="css/main.html">
        <link rel="stylesheet" type="text/css" href="css/main.css">


    </head>
    <body class="fullbleed">
    <template id="app" is="dom-bind">
    <paper-drawer-panel>
        <paper-header-panel main>
            <paper-toolbar>
                <div>Toolbar</div>
                    <paper-icon-button icon="menu" paper-drawer-toggle>
                </paper-icon-button>
                <span class="flex"></span>
                <paper-button onclick="_logout()">
                    <div>Log out</div>
                </paper-button>
            </paper-toolbar>
            <neon-animated-pages class="flex" selected="{{selected}}">
                <view-profile></view-profile>
                <add-skill></add-skill>
                <search-skill></search-skill>
                <view-users></view-users>
            </neon-animated-pages>
        </paper-header-panel>
        <paper-header-panel drawer>
            <paper-toolbar>
            </paper-toolbar>
            <paper-menu class="list" selected="{{selected}}">
                <paper-item>
                    <iron-icon icon="account-circle"></iron-icon>
                        <span>Profile</span>        
                </paper-item>
                <paper-item>
                        <iron-icon icon="add" on-click="showAddSkill"></iron-icon>  
                        <span>Add Skills</span> 
                </paper-item>
                <paper-item>
                        <iron-icon icon="search"></iron-icon>   
                        <span>Search</span> 
                </paper-item>
                <paper-item>
                        <iron-icon icon="android"></iron-icon>  
                        <span>Users</span>  
                </paper-item>
        </paper-menu>
        </paper-header-panel>
    </paper-drawer-panel>   
    </template>
    <script src="scripts/app.js"></script>
    </body>
    </html>

this is my elements.html:

    <!-- Iron -->
    <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <link rel="import" href="../bower_components/iron-form/iron-form.html">

    <!-- Neon -->
    <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">


    <!-- Routing -->
    <link rel="import" href="routing.html">

and this is the custom element that throws the error:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../elements/elements.html">


<dom-module id="add-skill">
    <style>

paper-dropdown-menu{
    width: 20%;
    --paper-input-container-label:{
        color: red;
    };

    --paper-input-container-focus-color: red;
    }

paper-input{
    --paper-input-container-label:{
        color: red;
    };

    --paper-input-container-label-focus:{
        color: red;
    };

    --paper-input-container-underline:{
        color: red;
    };

    --paper-input-container-focus-color: red;

    }

form{
        margin: 0px 0px 0px 100px;

    }
paper-input{
    width: 100px;
        }

        paper-button{
            color: red;
        }

paper-menu-button{
    width: 100%;
    }

    </style>
    <template id="skillForm">

        <paper-material elevation="1">
            <form is="iron-form "id="formPost" method="POST" action="../../scripts/insertSkill.php" onSubmit="window.location='skills.integr8it.local'">
                <paper-dropdown-menu id="vendorMenu" label="Vendor" selected-item-label="{{vendorSelected}}">
                    <paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="itemSelected">
                        <template is="dom-repeat" items="{{vendorList}}">
                            <paper-item id="vendorName" value="[[item]]">[[item]]</paper-item>
                        </template>
                    </paper-menu>
                </paper-dropdown-menu>
            <input id="selectedVendorName" name="selectedVendorName" value="[[vendorSelected]]" type="hidden">[[vendorSelected]]</input>
            <br />

                <paper-dropdown-menu id="certificationMenu" label="Certification" selected-item-label="{{certificationSelected}}">
                    <paper-menu class="dropdown-content" id="certificationSelect">
                        <template is="dom-repeat" items="{{certificationList}}">
                            <paper-item id="certificationName" value="item">[[item]]</paper-item>
                        </template>
                    </paper-menu>
                </paper-dropdown-menu>
             <input name="selectedCertificationName" value="[[certificationSelected]]" type="hidden"></input>
             <br />

                <paper-dropdown-menu id="classMenu" label="Class" selected-item-label="{{classSelected}}">
                    <paper-menu class="dropdown-content" id="classSelect">
                        <template is="dom-repeat" items="{{classesList}}">
                            <paper-item id="className" value="{{item}}">[[item]]</paper-item>
                        </template>
                    </paper-menu>
                </paper-dropdown-menu>
             <input id="selectedClassName" name="selectedClassName" value="[[classSelected]]" type="hidden">[[classSelected]]</input>
             <br />

             <paper-input name="year" label="Year" type="number" maxlength="4" max="2000" min="1990" auto-Validate required error-message="Year must be entered" value="{{year}}}">
                {{year}}
             </paper-input>
             <br />

            <paper-button class="primary" id="submitButton" raised onclick="clickHandler(event)" disabled>Submit</paper-button>
            <paper-item id="error"></paper-item>
            </form>   
        </paper-material>
    <iron-ajax
    id="vendorSubmit"
    method="POST"
    url="../../scripts/addskill.php"
    handle-as="json"
    on-response="handleVendorResponse"
    debounce-duration="300">
    </iron-ajax>

    <iron-ajax
    id="certificationSubmit"
    method="POST"
    url="../../scripts/getCertification.php"
    handle-as="json"
    on-response="handleCertificationResponse"
    debounce-duration="300">
    </iron-ajax>

    <iron-ajax
    id="classSubmit"
    method="POST"
    url="../../scripts/getClass.php"
    handle-as="json"
    on-response="handleClassResponse"
    debounce-duration="300">
    </iron-ajax>

    </template>
    <script>

     function clickHandler(event) {

      Polymer.dom(event).localTarget.parentElement.submit();

    }

    Polymer({
        is:'add-skill',

        behaviors:[Polymer.NeonAnimatableBehavior],

        properties:{
            animationConfig:{
                value:function(){
                    return{
                        'entry':{
                            name:'slide-from-right-animation',
                            node:this
                        },

                        'exit':{
                            name:'slide-left-animation',
                            node:this
                        }
                    };
                }
            }
        },

        ready:function(){
            this.sendVendorRequest();
            this.vendorList = [];
            this.certificationList = [];
            this.sendClassRequest();
            this.classesList = [];
            var cookie = document.cookie;

        },

         sendVendorRequest:function(){
            var datalist = 'vendor='+encodeURIComponent('1');
            this.$.vendorSubmit.body = datalist;
            this.$.vendorSubmit.generateRequest();
        },

        handleVendorResponse:function(request){
            var response = request.detail.response;
            for(var i = 0; i < response.length;i++){
                this.push('vendorList', response[i].name);
            }

        },

        submitForm:function(event){
            Polymer.dom(event).localTarget.parentElement.submit();


        },

        sendCertificationRequest:function(vendor){

            var datalist = 'vendorName='+encodeURIComponent(vendor);
            this.$.certificationSubmit.body = datalist;
            this.$.certificationSubmit.generateRequest();

        },

        handleCertificationResponse:function(request){
            this.splice('certificationList', 0, this.certificationList.length);
            var response = request.detail.response;
            for(var i = 0; i < response.length;i++){
                this.push('certificationList', response[i].name);
            }

        },

        sendClassRequest:function(className){

            var datalist = 'class='+encodeURIComponent('1');
            this.$.classSubmit.body = datalist;
            this.$.classSubmit.generateRequest();

        },

        handleClassResponse:function(request){
            var response = request.detail.response;
            for(var i = 0; i < response.length; i++){
                this.push('classesList', response[i].name);
            }

        },

          itemSelected : function(e) {

            var selectedItem = e.target.selectedItem;
            if (selectedItem) {
            this.sendCertificationRequest(selectedItem.innerText);
            console.log("selected: " + selectedItem.innerText);
            }
                this.validate();
          },

          listeners:{
            'iron-form-submit': '_redirect',
            'iron-form-response': '_redirect'
          },

        validate:function(){
            var selectedVendor = document.getElementById('selectedVendorName');
            if(selectedVendor.text !== null){
                this.$.submitButton.disabled = false;
            }
        },
            showIndex:function(){
                this.$.skillForm.render();
                this.fire('_showIndex');
            },


    });

    </script>
</dom-module>

the app loads slowly which makes sense as I am importing alot so the vulcanize was suggested to sort that out. And I get a random hierarchy message on IE. if I reload the page a few time it foes away. Again vulcanize was suggested to fix that as well

You are probably doing something wrong. Are you using custom-built elements? Share some code or we can't tell you what's wrong. — Andreas Galster
– Andreas Galster, Commented Oct 15, 2015 at 7:45
Hey Andreas, I thought someone might have had the same errors. But I have edited my initial post with the code I am using. Like I said before, works 100% in chrome with all the native compatibility chrome has, but IE and firefox fight me. with different errors. Firefox has a problem defining a gObj in webcomponents.js. IE give me the errors about mousedown and click but does load sometimes if I do not get a hierarchy error, but throws those error when using selected from the paper-menu — user3510945
– user3510945, Commented Oct 15, 2015 at 10:19

Community · Accepted Answer · 2020-06-20 09:12:55Z

The issue is caused by the ShadowDOM polyfill.

If webcomponents-lite.js, which doesn't have ShadowDOM, is used instead of webcomponents.js then all will work correctly.

Since 0.8-preview polymer only depends on webcomponents-lite.js, so you can use this instead of webcomponents.js without any problem: ShadowDom polyfill will definitely be unnecessary since polymer 0.8-preview

Personally, I have not needed to use the Shadow DOM so far...

Example of Shadow DOM:

<dom-module id="my-webcomponent">

    <style>
        ...
    </style>

    <!-- //////////// Content of <template> will be appended to the <my-webcomponent> tag (works perfectly with webcomponents-lite.js) -->
    <template>
        <h1>Shadow Root!</h1>
    </template>

    <!-- //////////// This is Shadow DOM (doesn't work with webcomponents-lite.js) -->
    <div id="outsideTemplate">
        <h1>Shadow DOM!</h1>
    </div>

    <script>

        Polymer({
            is: "my-webcomponent",
            ...
            ...
            ...
        });

    </script>

</dom-module>

More information:

If you still want to use webcomponents.js and have problems with JQuery, perhaps (I have not tried it) there are one "solution":

You could wrap all your JQuery stuff inside this IIFE:

(function(document) {

    // JQuery code here

})(wrap(document));

NOTE:

Firefox team are (still) working on it: https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

Collectives™ on Stack Overflow

Polymer using webcomponents.js instead of webcomponents-lite.js breaks app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related