Shadow root (DOM) not shown for custom element when debug has option selected
162 views
Skip to first unread message
Just.A.Guy
Mar 1, 2014, 1:36:18 PM3/1/14
to polym...@googlegroups.com
I don't know what has changed in Polymer.
Why does this data appear in template?
A day or two back, when I checked the "show shadow DOM"
in the settings options of the debugger, I could go to the
"elements" tab of the debugger and the arrow would
be adjacent to the custom element in the main HTML
page.
Now it does not appear. Also the CSS style
within the template is not being applied to
the template elements. I have a class that
should apply an orange background to one
of the elements. From the display of the
rendered page it has black text with white
background. A day or so ago, it was working
correctly.
I don't know if I changed anything, so I stripped
down the custom element down to just the
template, and the Polymer statement. This
did not change anything.
Finally, the content of the custom element appears in the output when the "content"
was not mapped in the template.
Here is the template:
------------------------------------------------------------------
<polymer-element name='new-caret' attributes='lrecl'>
<template id='tp-new-caret'>
<style>
pre
{
font-family: courier;
font-style: normal;
font-weight: normal;
float: left;
overflow: hidden;
}
div
{
font-family: courier;
font-style: normal;
font-weight: normal;
float: left;
overflow: hidden;
}
.right_col
{
font-family: courier;
font-style: normal;
font-weight: normal;
padding: 0px;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
border-spacing: 0px;
margin: 0px;
color: black;
background-color: orange;
float: left;
}
.left_col
{
padding: 0px 0px 0px 10px;
border: 0px;
margin: 0px;
color: black;
background-color: orange;
float: left;
}
.block_caret
{
font-family: courier;
font-style: normal;
font-weight: normal;
padding: 0px;
border: 0px;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
border-style: solid;
border-color: black;
margin: 0px;
color: black;
background-color: rgba(128, 128, 128, 0.8;
float: left;
}
</style>
<span id='entire_line' width='83' style='overflow: hidden;'>
<pre id='left_col' contentEditable class='left_col'></pre>
<pre id='caret' contentEditable class='block_caret'></pre>
<pre id='right_col' contentEditable class='right_col' >this is from new-caret</pre>
<div style='background-color: blue;'>eol</div>
</span>
</template>
<script>
var gbl_opts = {
lrecl: 80,
value: "Here is the answer! how global is it?",
};
// Polymer('new-caret');
Polymer('new-caret', gbl_opts);
</script>
-----------------------------------------------------------------------------------------
Here is the main HTML:
<!DOCTYPE html>
<html>
<header>
<script src="./bower_components/platform/platform.js"></script> <!-- until support html import -->
<link rel='import' href="./bower_components/polymer/polymer.html"></link> <!-- until polymer support -->
<link rel='import' href='./new_caret.html'></link>
<style>
table
, tbody
, tr
, td
{
color: black;
background-color: lightgreen;
padding: 0px;
border: 0px;
margin: 0px;
border-spacing: 0px;
border-collapse:separate;
}
</style>
</header>
<body width='900' style='overflow: hidden;'>
<h1>Testing command line with block caret</h1>
<br/>
<input type='button' id='my_btn' value='get it'></input>
<br/>
<new_caret id='nc' >Why does this data appear in template?</new_caret>
</body>
</html>
---------------------------------------------------------------------------------------
Here is the display produced by node-webkit: - no colors just black/white
Testing command line with block caret
Why does this data appear in template?
===================================================
I have tried to update polymer and platform packages using bower
here is the version information:
"main": "polymer.html",
"version": "0.2.0",
-----------------------------------------------
"name": "platform",
"main": "platform.js",
"homepage": "https://github.com/Polymer/platform",
"authors": [
"The Polymer Authors"
],
"description": "Integrate platform polyfills: load, build, test",
"keywords": [
"polymer",
"web",
"components"
],
"license": "BSD",
"private": true,
"version": "0.2.0",
---------------------------------------------------------------
don't know what else to tell you.
Help!
Eric Bidelman
Mar 1, 2014, 2:07:09 PM3/1/14
to Just.A.Guy, polymer-dev
Your definition defines the element name as "new-caret" but you're declaring the tag as "new_caret" :)
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/fecc405d-0b99-4b06-a55c-eb362dcdd14f%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
Just.A.Guy
Mar 1, 2014, 4:04:39 PM3/1/14
to polym...@googlegroups.com
You are so correct - thanks so much
Reply all
Reply to author
Forward
0 new messages