I have a simple polymer app:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="x-ua-compatible" content="IE=10" >
<script type="text/javascript" src="components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="components/font-roboto/roboto.html">
<link rel="import" href="viewer-app.html">
<style>
html,body {
background-color: #fff;
font-family: 'RobotoDraft', sans-serif;
}
</style>
</head>
<body fullbleed vertical layout unresolved>
<template is="auto-binding">
<viewer-app fit></viewer-app>
</template>
</body>
the custom element 'viewer-app' does not even show up in f12 tools. I'm not getting any errors at all.
How do I get this to work?
Related
I was going through the MDN page for Using Templates and Slots where it mentions while citing an example of using <template> within a Shadow DOM that (emphasis mine):
And because we are appending its contents to a shadow DOM, we can
include some styling information inside the template in a
element, which is then encapsulated inside the custom element. This
wouldn't work if we just appended it to the standard DOM.
My understanding from this statement is that <style> tags within <template> work only in a shadow tree but upon trying an example of doing the same and appending the <template> to the standard DOM, I see that it works (tried in Chrome, Mozilla, and Safari)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<template id="template">
<style>
span {
color: blue;
}
</style>
<span>Span from template</span>
</template>
</body>
<script>
const template = document.getElementById('template');
const templateContent = template.content;
document.body.appendChild(templateContent);
</script>
</html>
I also thought that it might be referring to appending a standalone <style> tag to the standard DOM for which I tried this snippet which too seemed to work fine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Test</div>
</body>
<script>
const style = document.createElement('style');
style.innerHTML = `
div {
color: blue;
}
`;
document.body.appendChild(style);
</script>
</html>
I'm guessing my inference is incorrect(or are the docs incorrect?). What limitation is that statement actually referring to?
I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">
I've build an webcomponent with Polymer, and it works on all browsers except for IE11.
I've tried everything but can't figure out why it doesn't work.
Attached is the code, could you help me figure out why?
It remains at the loading.
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial scale=1, user-scalable=yes">
<title>wc test</title>
<link rel="manifest" href="/manifest.json">
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script>if(!window.customElements){document.write("<!--")}</script>
<script type="text/javascript" src="/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!-- do not remove -->
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="/src/klantenvertellen-app/klantenvertellen-app.js"></script>
</head>
<body>
<klantenvertellen-app>Loading...</klantenvertellen-app>
</body>
</html>
Why does the content of the paper-item not vertical centered in IE like in Chrome in the example here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-item/paper-item.html">
</head>
<body>
<template is="dom-bind">
<paper-item style='background-color:Red'>Why is this not centered vertically in IE?</paper-item>
</template>
</body>
</html>
http://jsbin.com/busemomecu/1/edit?html,output
?
Cheers
I am trying to use "vulcanize index1.html > index2.html", but am stumbling on an issue in IE. I have condensed it into this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel='import' href='bower_components/paper-drawer-panel/paper-drawer-panel.html'>
</head>
<body>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
drawer
</div>
<div main>
main
</div>
</paper-drawer-panel>
</body>
In Chrome the result is fine, but in IE, "drawer" and "main" are shown incorrectly
Anyone?
Seems to be a bug which is already logged
https://github.com/Polymer/vulcanize/issues/209