I'm trying to get a reference of outer HTML(index.html)'s div from the polymer dart class. I know I can query the reference of app_element.html's div by the following code:
shadowRoot.querySelector('#select_this')
However, if I were to get a reference of index.html's div (#select_this), how can I do that from app_element.dart class? Is this even possible? If not, how can I design the polymer elements so that it can access DOM of other HTML pages and not only the ones that bind that particular polymer element?
app_element.dart
#CustomTag('app-element')
class AppElement extends PolymerElement {
#override
void attached() {
var my_div = shadowRoot.querySelector('#select_this'); // contains app_element.html's #select_this div
}
}
index.html
<html>
<body>
<head>
<link rel="import" href="../lib/app_element.html">
</head>
<app-element></app-element>
<div id="select_this"></div> <!-- Not sure how to select this... -->
<script type="application/dart">export 'package:polymer/init.dart';</script>-->
<script src="packages/browser/dart.js"></script>
</body>
</html>
app_element.html
<!DOCTYPE html>
<polymer-element name='app-element'>
<div id="select_this"> <!-- selectable via: shadowRoot.querySelector('#select_this') -->
<script type="application/dart" src="app_element.dart"></script>
</polymer-element>
Use the documents querySelector instead:
import 'dart:html';
...
document.querySelector('#select_this');
You can get access to elements within other elements shadow DOM
// old
document.querySelector('* /deep/ #select_this');
// or new (probably not yet supported everywhere
document.querySelector('* >>> #select_this');
Related
This question already has an answer here:
Nested element (web component) can't get its template
(1 answer)
Closed 3 years ago.
I was trying to understand how web components work so I tried to write a small app that I served on a webserver (tested on Chrome which support rel="import"):
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="import" href="my-app.html" />
</head>
<body>
<my-app />
</body>
</html>
my-app.html:
<template id="template">
<div>Welcome to my app!</div>
</template>
<script>
class MyApp extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: "open"});
const template = document.getElementById("template");
const clone = document.importNode(template.content, true);
shadow.appendChild(clone);
}
}
customElements.define("my-app", MyApp);
</script>
But it doesn't seem to work. The <my-app /> tag is not rendered at all in the DOM and I get this error on the console:
Uncaught TypeError: Cannot read property 'content' of null
What cannot I retrieve the template node? What am I doing wrong?
What I would also like to know is if I am allowed to write an HTML document without the boilerplate code (doctype, head, body, ...), because it's meant to describe a component and not an entire document to be used as is. Is it allowed by the HTML5 specs and/or is it correctly interpreted by a majority of browsers?
Thank you for your help.
While inside the template, don't use the document global:
<template id="template">
<div>Welcome to my app!</div>
</template>
<script>
class MyApp extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: "open"});
// while inside the imported HTML, `currentDocument` should be used instead of `document`
const currentDocument = document.currentScript.ownerDocument;
// notice the usage of `currentDocument`
const template = currentDocument.querySelector('#template');
const clone = document.importNode(template.content, true);
shadow.appendChild(clone);
}
}
customElements.define("my-app", MyApp);
</script>
Plunker demo: https://plnkr.co/edit/USvbddEDWCSotYrHic7n?p=preview
PS: Notes com compatibility here, though I assume you know HTML imports are to be deprecated very soon.
I am trying to download div content of custom element using document.getElementById of the div and trying to implement download option from the JS FIddle - http://jsfiddle.net/evx9stLb/
From console, I am getting below error
pen.js:6 Uncaught TypeError: Cannot read property 'innerHTML' of null
at download (pen.js:6)
at HTMLButtonElement.onclick (index.html:15)
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
</head>
<body>
<x-foo></x-foo>
<button onClick="download()">Download</button>
<dom-module id="x-foo">
<template>
<button on-click="toggle">toggle collapse</button>
<div id="content">
<iron-collapse id="collapse">
<div>Content goes here...</div>
</iron-collapse>
</div>
</template>
</dom-module>
</body>
JS:
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content").innerHTML;
a.click();
}
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
this.$.collapse.toggle();
}
}
customElements.define(XFoo.is, XFoo);
Code which I am below - https://codepen.io/nagasai/pen/ZyRKxj
Make some updates, and help this would help,
HTML
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<button on-click="download">Download</button>
<button on-click="toggle">toggle collapse</button>
<div id="content">
<iron-collapse id="collapse">
<div>Content goes here...</div>
</iron-collapse>
</div>
</template>
</dom-module>
</body>
JS
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
this.$.collapse.toggle();
}
download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + this.$.content.innerHTML;
a.click();
console.log(this.$.content.innerHTML);
}
}
customElements.define(XFoo.is, XFoo);
https://codepen.io/renfeng/pen/BZOQro
a document query (on light dom) won't pierce the shadowDom. To do that you have to specifically select the element and query it's shadowRoot.
it would look something like this
a.href = "data:text/html," + document.getElementsByTagName('x-foo')[0].shadowRoot.querySelector('#content').innerHTML;
BUT only do this if you can't modify the element itself. It's not nice to stir around in someone else's shadowRoot.
As shown by Frank R. its far better to modify the element itself and provide a download functionality.
You can trigger this easily from an external element with something like
document.getElementsByTagName('x-foo')[0].download();
DOM under the shadow Root, or the shadow DOM, can not be accessed via innerHTML. It is not supposed to be. Just the way it is.
So, No, you simply can not get the shadow DOM contents via innerHTML.
There used to be access now deprecated to shadowDOM via vanilla javascript earlier
and also discussed here
However, with shadow DOM V1 beig the norm now, you may have to just wait and watch if you can pierce the shadowDOM
An alternative would be, to move your entire DOM in the custom element, outside of it, Using Slots.
Slots distribute content, so, the page that uses your element, can access it via innerHTML.
You could possibly try hacky ways like the one mentioned here
I want to use trumbowyg.js in my polymer element, it includes jquery.js and trumbowyg.js. It works fine in Firefox but not in chrome.
It gives error, may be because shadow dom lookup/separation in chrome. The error happens where ever trumbowyg.js uses "this".
Whats going wrong here? What should I do differently?
I am using Polymer 2.0
error:
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at trumbowyg.js:1544
my-notes.html
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../bower_components/trumbowyg/trumbowyg.html">
<dom-module id="my-notes">
<template>
<link rel="stylesheet" href="../bower_components/trumbowyg/dist/ui/trumbowyg.min.css">
<firebase-auth user="{{user}}" signed-in="{{signedIn}}"></firebase-auth>
<div class="card">
<div id="trumbowygd">hello</div>
</div>
</template>
<script>
class MyNotes extends Polymer.Element {
static get is() { return 'my-notes'; }
static get properties() {
return {
user: {
type: Object,
observer: '_shownotearea'
},
};
}
_shownotearea(){
var myFineElement = this.$.trumbowygd;
myFineElement.innerHTML="hello nice meeting you";
$(myFineElement).trumbowyg({});
}
</script>
</dom-module>
trumbowyg.html
<script src="../jquery/dist/jquery.min.js"></script>
<script src="dist/trumbowyg.js"></script>
This doesnt seem to be working
jQuery plugins and Polymer elements
The short answer is this plugin probably won't work with native Shadow DOM.
Likely trumbowyg is trying to query the document to look for some element. Shadow DOM creates markup encapsulation so you can't use $() or document.querySelector to look for things inside of shadow roots. In general I recommend not using jQuery plugins inside of Shadow DOM for this reason.
I tried to extend a <button>, but so far did not succeed.
What am I doing wrong. I'm using the Dart Editor+SDK 1.5.2
In pubspec.yaml the version for Polymer is set to:
polymer: ">=0.11.0 <0.12.0"
index.html
<!DOCTYPE html>
<html>
<head>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Extended Button - Dart v1.5.2</title>
<!--Extended Button-->
<link rel="import" href="view/ext_button.html" />
</head>
<body>
<button is="ext-button">Test Button</button>
<script type="application/dart">export "package:polymer/init.dart";</script>
</body>
</html>
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement {
ExtButton.created() : super.created();
factory ExtButton(){
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
So the code above does not work, but as soon as write it like below (just to validate the ext-button works) it tells me the following:
"web/index.html:20:7: custom element "ext-button" extends from "button", but this tag will not include the default properties of "button".
To fix this, either write this tag as <button is="ext-button"> or remove the "extends" attribute from the custom element declaration."
<ext-button>Test Button</ext-button>
So a little bit confused ;-) I think the fix is easy and simple - but I just don't see the problem ;-(
Just for further references, the two things above solved the problem.
Here are the updated parts, now it works.
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement with Polymer {
ExtButton.created() : super.created()
{
polymerCreated();
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
<content></content>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
As far as I see, you are missing thwo things:
a call to polymerCreated() inside the custom elements constructor.
and extends ButtonElement with Polymer
There are already similar question. I'll look them up later when I have more time. Maybe you find them yourself in the meantime. Please add a comment with a link if you do.
A Polymer noob...
I'm trying to create a custom element as per the Polymer API docs, where my main page looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<div id="test"></div>
<polymer-element name="book-template" constructor="BookTemplate" noscript>
<template>
<style>
h1 { color: orange; }
</style>
<h1>Hello from some-foo</h1>
</template>
</polymer-element>
</body>
</html>
I know that the page content will render if I just put <book-template></book-template> on the page, or if I do something like this inside the <body> tag:
<script>
var book = document.createElement('book-template');
document.getElementById('test').appendChild(book);
</script>
But I'm trying to utilize the element's constructor attribute, assuming that this will create the element when placed somewhere inside of <body>:
<script>
var book = new BookTemplate();
</script>
...but getting a console message that BookTemplate() is not defined.
I'm sure it's something simple...any idea? Thanks in advance.
I guess you have to wait for the polymer-ready event, so that the constructor is available in the global window object http://jsbin.com/kosuf/2/edit?html,console,output:
<script>
document.addEventListener('polymer-ready',function() {
var book = new BookTemplate();
if (book) {
console.log('Ok');
}
});
</script>