Ok. This is my last resort until flipping the table and saying goodbye to Polymer for good. I've been trying for the past 3 days to do some basic stuff in Polymer but I haven't been able to do so. Between including some paper-elements ,and caching (which apparently not even disabling it from Chrome's toolbox seem to work) I don't know which is the one who is giving me the most headaches. There is also no way for me to debug the project. Enough rant...
I started to finally grasp the library, until I tried using the <paper-dropdown-menu> and a custom element downloaded from github: <simple-slider>.
Simple Slider does not seem to work (does not show up the carousel correctly), and paper-dropdown-menu does not select the item.
All the dependencies have been successfully referenced (checking with Visual Studio Code), and the webComponents polyfill is included as well.
Here are my main .html files:
<!doctype html>
<!--
#license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit">
<title>Polymer Starter Kit</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<pgarena-navbar></pgarena-navbar>
<simple-slider style="width:100%; height:500px" auto-play="true">
<img src="https://placehold.it/350x150"/>
<img src="https://placehold.it/350x150"/>
<img src="https://placehold.it/350x150"/>
</simple-slider>
<div class="container">
<paper-dropdown-menu label="Dinosaurs">
<paper-listbox class="dropdown-content">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
</div>
<!-- Uncomment next block to enable Service Worker support (1/2) -->
<!--
<paper-toast id="caching-complete"
duration="6000"
text="Caching complete! This app will work offline.">
</paper-toast>
<platinum-sw-register auto-register
clients-claim
skip-waiting
base-uri="bower_components/platinum-sw/bootstrap"
on-service-worker-installed="displayInstalledToast">
<platinum-sw-cache default-cache-strategy="fastest"
cache-config-file="cache-config.json">
</platinum-sw-cache>
</platinum-sw-register>
-->
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
Elements.html:
<!--
#license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<!-- App Elements -->
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<!-- Custom Elements -->
<link rel="import" href="pgarena-navbar/pgarena-navbar.html">
<link rel="import" href="pgarena-container/pgarena-container.html">
<link rel="import" href="pgarena-tournament-card/pgarena-tournament-card.html">
<!-- 3rd Party Non Google -->
<link rel="import" href="../bower_components/polymer-simple-slider/src/simple-slider.html">
<!-- Uncomment next block to enable Service Worker Support (2/2) -->
<!--
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
-->
<!-- Configure your routes here -->
<link rel="import" href="routing.html">
<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="my-greeting/my-greeting.html">
<link rel="import" href="my-list/my-list.html">
BTW: I tried reinstalling all the bower packages, but it did not work. Tried unzipping the latest Polymer into the bower_components folder and did not work.
Any ideas? I can't believe it's been this painful to use.
Simple Slider does not seem to work (does not show up the carousel correctly)
I assume you're referring to polymer-simple-slider. That project depends on Polymer 0.2.x, which is not compatible with the newest version of Polymer (1.10.1 as of this writing). If you're interested in upgrading that element, you could follow the migration guide. The element's source looks pretty trivial, and it wouldn't take much effort to upgrade IMO.
paper-dropdown-menu does not select the item.
Please clarify what you mean. Selection works fine here:
<head>
<base href="https://polygit.org/polymer+1.10.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
</head>
<body>
<paper-dropdown-menu label="Dinosaurs">
<paper-listbox slot="dropdown-content" class="dropdown-content">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</body>
codepen
Related
I am running Ubuntu on a VM.
I installed XAMPP.
htdocs is the root directory.
File in question: htdocs/index.php
CSS Directories: htdocs/css/, htdocs/lib/
When I enter "https://localhost/home/index.php" in the search bar, only the html loads.
I have ran XAMPP on Windows for over a year and never had any problems.
I have tried several solutions already online and none of them have made any difference.
htdocs/index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="img/favicon.png" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
<!-- =======================================================
Theme Name: Template
Theme URL: https://bootstrapmade.com/bizpage-bootstrap-business-template/
Author: BootstrapMade.com
License: https://bootstrapmade.com/license/
======================================================= -->
</head>
<body>
This is such a petty issue. Any help would be appreciated.
Have you tryed to reset your Browser Cache?
Shortcut for that is SHIFT + F5
You may be using browser caching? Maybe just try a hard refresh CTRL+F5 (Sorry if this is obvious but try it out)
OR
You can Use this while linking Css:
<link href="style.css?<?=filemtime("style.css")?>" rel="stylesheet" type="text/css" />
I want to use Bootstrap Tags Input in my ReactJS application. I downloaded that component and linked the CSS file and the JS file of the component to index.html file of my react application. Below is the code for the same:
<!-- Bootstrap Tags Input Script -->
<link rel="stylesheet" type="text/css" href="../src/Assets/bootstrap-tagsinput-latest/src/bootstrap-tagsinput.css"></link>
<script type="text/javascript" src="../src/Assets/bootstrap-tagsinput-latest/src/bootstrap-tagsinput.js"></script>
<!-- Bootstrap Tags Input Script -->
Then I simply added data-role="tagsinput"to my input element, below is the code for the same:
<input
class="form-control"
aria-label="Large"
aria-describedby="inputGroup-sizing-sm"
placeholder="Search"
data-role="tagsinput"
id={style["search-bar-field"]}
/>
After doing the above-mentioned steps, I'm still not able to get the bootstrap tags input working. I'm getting the following results (i.e. the input is not being converted to a tag when I click enter):
Not sure whether it's important or not, but the head element of my index.html file looks like this (I have link and script tags of Bootstrap Library and Font Awesome Library in the head element of my index.html file of my ReactJS application):
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- Bootstrap Tags Input Script -->
<link rel="stylesheet" type="text/css" href="../src/Assets/bootstrap-tagsinput-latest/src/bootstrap-tagsinput.css"></link>
<script type="text/javascript" src="../src/Assets/bootstrap-tagsinput-latest/src/bootstrap-tagsinput.js"></script>
<!-- Bootstrap Tags Input Script -->
<!-- Font Awesome Script -->
<script src="https://kit.fontawesome.com/e5ef6344ab.js" crossorigin="anonymous"></script>
<!-- Font Awesome Script -->
<!-- Bootstrap Script -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js#1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('body').bootstrapMaterialDesign();
});
</script>
<!-- Bootstrap Script -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
NOTE: I have also installed bootstrap-tagsinput in my react app from npm but the tags input functionality is still not working.
It would be really great if someone could help me with this or guide me as to where I'm going wrong. Thanks!
I have a node js project and added a template for the admin are. on my local server it show everything is ok but when i push it to my web server on vultr it does not load the admin page and show several errors in the console. these errors are not shown in the dev systems web browser console.
The errors are:
Refused to apply style from 'http://www.skillbuild.pro/admin/assets/node_modules/morrisjs/morris.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
it also shows several js files are not fount (404 error) whereas these files exist in the relevant folder.
Following is my head section:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1"> {{!--
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> --}}
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Elite Admin Template - The Ultimate Multipurpose admin template</title>
<!-- This page CSS -->
<!-- chartist CSS -->
<link href="/admin/assets/node_modules/morrisjs/morris.css" rel="stylesheet" type="text/css">
<!--Toaster Popup message CSS -->
<link href="/admin/assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet" type="text/css">
<!-- Morris CSS -->
<link href="/admin/assets/node_modules/morrisjs/morris.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="/admin/dist/css/style.min.css" rel="stylesheet" type="text/css">
<!-- Dashboard 1 Page CSS -->
<link href="/admin/dist/css/pages/dashboard1.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
and these are my footer section where the js files are called:
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="/admin/assets/node_modules/jquery/jquery-3.2.1.min.js" type="application/javascript"></script>
<!-- Bootstrap popper Core JavaScript -->
<script src="/admin/assets/node_modules/popper/popper.min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/bootstrap/dist/js/bootstrap.min.js" type="application/javascript"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="/admin/dist/js/perfect-scrollbar.jquery.min.js" type="application/javascript"></script>
<!--Wave Effects -->
<script src="/admin/dist/js/waves.js" type="application/javascript"></script>
<!--Menu sidebar -->
<script src="/admin/dist/js/sidebarmenu.js" type="application/javascript"></script>
<!--Custom JavaScript -->
<script src="/admin/dist/js/custom.min.js" type="application/javascript"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<script src="/admin/assets/node_modules/raphael/raphael-min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/morrisjs/morris.min.js" type="application/javascript"></script>
<script src="/admin/assets/node_modules/jquery-sparkline/jquery.sparkline.min.js" type="application/javascript"></script>
<!-- Popup message jquery -->
<script src="/admin/assets/node_modules/toast-master/js/jquery.toast.js" type="application/javascript"></script>
<!-- Chart JS -->
<script src="/admin/dist/js/dashboard1.js" type="application/javascript"></script>
in my server.js file I have defined the path:
// Use path
app.use(express.static(path.join(__dirname, 'public')));
for some reason on the local server it shows everything and there are no errors, but when I push it to my web server which is a vps and I am using pm2 for node process manager, it shows the errors in the browser and does not load the admin page.
Please help, this is driving me crazy!!!
I have my website which consists of two pages, plus my own style.css that works perfectly on my local. But when I FTP it onto the server of my hosting service, the index.html is unable to read from my style.css. I've checked the path. I've checked the order of declaration. I've maintained the same file structure and the same order of CSS declaration (global to local)on my local, and its working fine. Does anyone have suggestions?
Here is how the head section looks:
I had to declare a CSS style for a script I'm using in the document. Since it won't read my style.css I did an internal declaration.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Google Font: Source Code Pro-->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.min.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fancybox jQuery -->
<script src="fancybox/jquery.fancybox.min.js"></script>
<style type="text/css">
.menuActive {
background-color: #ffffff;
}
</style>
</head>
A relevant portion of my file structure on the server is as follows (tried including a screenshot but apparently I can't do that on Stackoverflow just yet):
Folders & files:
css
fancybox
files
img
wp_admin
wp-content
wp-includes
.ftpquota
.htaccess
default.htm
index.html
The img folder is on the same level as the css folder and the images are loading properly.
It's probally because on your server you are using https://
change your style links to something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> and remove http part
Trying to display hello world using elements but nothing happens any help?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
</head>
<body unresolved>
<hello-world></hello-world>
</body>
</html>
hello-world.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" nonscript>
<template>
<h2>Hello World</h2>
</template>
</polymer-element>
Code for "hello-world.html" is now:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer ({ is: "hello-world", });
</script>
</dom-module>
If you are using polymer version 0.8 or 0.9, then <polymer-element ... should be <dom-module ...
See more from polymer site:
https://www.polymer-project.org/0.9/docs/start/quick-tour.html
You have a typo, nonscript needs to be noscript.
<polymer-element name="hello-world" noscript>
I have the same problem and dont find the mistake.
index.html
<html>
<head>
<title>Polymer-Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- file is available, auto completed by api -->
<link rel="import" href="hello/hello.html">
<!-- file is available, auto completed by api -->
<!-- netbeans doesn't know relation import -->
</head>
<body>
<h1>My first Polymer-Application</h1>
<hello></hello>
</body>
</html>
hello/hello.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- file is available, auto complete by api -->
<polymer-element name="hello" noscript>
<template>
<h1>Hello Polymer world</h1>
</template>
</polymer-element>
My platfrom is:
Win 8.1
nodejs
bower
polymer (installed over bower, folders and files are availible)
git
netbeans dev edition (as editor)
xammp (as apache webserver)
tested with chrome, firefox and ie10 and the custom element is not be shown. i don't think it's a browser problem. it's the simpliest element you can write, but why did it not work?
Edit:
tested it on a clean ubuntu installation. and it still does not work?
i also tested original code from the polymer page and this won't work too.
am i to stupid for copy paste?
Edit 2:
i found it an have running my polymer apps. If i use Polymer 1.0.9 i should not read the tutorial for 0.5.0
changes:
index.html:
<!DOCTYPE html>
<html>
<head>
...
<script scr="bower_components/webcomponents-lite.min.js"></script>
<!-- the lite edition is needet since polymer version 0.8 -->
<link rel="import" href="hello/hello.html">
...
</head>
<body>
<hello></hello>
</body>
</html>
hello/hello.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello">
<!-- its not longer a polymer-element. we have to use dom-module and id and the noscript option is not longer supported -->
<template>
<template>
<script>
// everytime you need to initialize a Polymer object
Polymer({
is: 'hello' // must be set now
});
</script>
</dom-module>
if you want to work with parameters you need to set it in the polymer ready function and every placeholder must be surrounded by a html tag like span without any other content in it.
Replace the line
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
with
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
This should fix the issue.