Event example from Polymer 3 devguide “Listener on outside elements” throws an exception
1
I've created example for the snippets from the Polymer 3 dev guide. This example doesn't compile as _myLocationListener is not defined and it is used in the constructor. The listener is also not defined inside the dev guide snippet.
How this._myLocationListener property should be initialized.
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
/**
* @customElement
* @polymer
*/
class XcustomElementEventHandlingApp extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
border: dotted;
background: aliceblue;
}
</style>
<h2>Hello [[prop1]]!</h2>
<button on-click="handleClick">Kick Me</button>
<div id="child-el-01">Please, check the logs in Console (dev tools).</div>
`;
}
static get properties() {
return {
prop1: {
type: String,
value: 'xcustom-element-event-handling-app'
}
};
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
ready() {
super.ready();
this.addEventListener('click', this._onClick);
const childElement = this.shadowRoot.getElementById('child-el-01');
childElement.addEventListener('click', this._onClick.bind(this));
childElement.addEventListener('mouseover', event => this._onHover(event));
console.log('(this, the) custom element added to DOM.');
}
handleClick() {
console.log('Ow!');
}
_onClick(event) {
this._makeCoffee();
}
_makeCoffee() {
console.log('in _makeCoffee()')
}
_onHover(event) {
console.log('_onHover(ev) called');
console.log(JSON.stringify(event));
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('hashchange', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('hashchange', this._boundListener);
}
}
window.customElements.define('xcustom-element-event-handling-app', XcustomElementEventHandlingApp);
package.json:
{
"name": "xcustom-element-event-handling",
"description": "event handling demo. From dev guide.",
"dependencies": {
"@polymer/polymer": "^3.0.0"
},
"devDependencies": {
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.0"
}
}
Following exception is thrown:
Uncaught TypeError: this._myLocationListener.bind is not a function
at new XcustomElementEventHandlingApp (xcustom-element-event-handling-app.js:36)
javascript web-component polymer-3.x
asked Nov 16 '18 at 8:47
TihomirTihomir
748
add a comment |
1
I've created example for the snippets from the Polymer 3 dev guide. This example doesn't compile as _myLocationListener is not defined and it is used in the constructor. The listener is also not defined inside the dev guide snippet.
How this._myLocationListener property should be initialized.
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
/**
* @customElement
* @polymer
*/
class XcustomElementEventHandlingApp extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
border: dotted;
background: aliceblue;
}
</style>
<h2>Hello [[prop1]]!</h2>
<button on-click="handleClick">Kick Me</button>
<div id="child-el-01">Please, check the logs in Console (dev tools).</div>
`;
}
static get properties() {
return {
prop1: {
type: String,
value: 'xcustom-element-event-handling-app'
}
};
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
ready() {
super.ready();
this.addEventListener('click', this._onClick);
const childElement = this.shadowRoot.getElementById('child-el-01');
childElement.addEventListener('click', this._onClick.bind(this));
childElement.addEventListener('mouseover', event => this._onHover(event));
console.log('(this, the) custom element added to DOM.');
}
handleClick() {
console.log('Ow!');
}
_onClick(event) {
this._makeCoffee();
}
_makeCoffee() {
console.log('in _makeCoffee()')
}
_onHover(event) {
console.log('_onHover(ev) called');
console.log(JSON.stringify(event));
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('hashchange', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('hashchange', this._boundListener);
}
}
window.customElements.define('xcustom-element-event-handling-app', XcustomElementEventHandlingApp);
package.json:
{
"name": "xcustom-element-event-handling",
"description": "event handling demo. From dev guide.",
"dependencies": {
"@polymer/polymer": "^3.0.0"
},
"devDependencies": {
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.0"
}
}
Following exception is thrown:
Uncaught TypeError: this._myLocationListener.bind is not a function
at new XcustomElementEventHandlingApp (xcustom-element-event-handling-app.js:36)
javascript web-component polymer-3.x
asked Nov 16 '18 at 8:47
TihomirTihomir
748
stackoverflow.com/help/how-to-ask
– Eugene Mihaylin
Nov 16 '18 at 9:01
Hope that latest edit did improve the question. I'm just started with Polymer 3 and am trying to run the dev. guide examples.
– Tihomir
Nov 16 '18 at 9:26
please add concrete code sample and error to the question body
– Eugene Mihaylin
Nov 16 '18 at 9:27
Thanks! Example code and link to snippet are added to question body.
– Tihomir
Nov 16 '18 at 14:34
add a comment |
1
1
1
I've created example for the snippets from the Polymer 3 dev guide. This example doesn't compile as _myLocationListener is not defined and it is used in the constructor. The listener is also not defined inside the dev guide snippet.
How this._myLocationListener property should be initialized.
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
/**
* @customElement
* @polymer
*/
class XcustomElementEventHandlingApp extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
border: dotted;
background: aliceblue;
}
</style>
<h2>Hello [[prop1]]!</h2>
<button on-click="handleClick">Kick Me</button>
<div id="child-el-01">Please, check the logs in Console (dev tools).</div>
`;
}
static get properties() {
return {
prop1: {
type: String,
value: 'xcustom-element-event-handling-app'
}
};
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
ready() {
super.ready();
this.addEventListener('click', this._onClick);
const childElement = this.shadowRoot.getElementById('child-el-01');
childElement.addEventListener('click', this._onClick.bind(this));
childElement.addEventListener('mouseover', event => this._onHover(event));
console.log('(this, the) custom element added to DOM.');
}
handleClick() {
console.log('Ow!');
}
_onClick(event) {
this._makeCoffee();
}
_makeCoffee() {
console.log('in _makeCoffee()')
}
_onHover(event) {
console.log('_onHover(ev) called');
console.log(JSON.stringify(event));
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('hashchange', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('hashchange', this._boundListener);
}
}
window.customElements.define('xcustom-element-event-handling-app', XcustomElementEventHandlingApp);
package.json:
{
"name": "xcustom-element-event-handling",
"description": "event handling demo. From dev guide.",
"dependencies": {
"@polymer/polymer": "^3.0.0"
},
"devDependencies": {
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.0"
}
}
Following exception is thrown:
Uncaught TypeError: this._myLocationListener.bind is not a function
at new XcustomElementEventHandlingApp (xcustom-element-event-handling-app.js:36)
javascript web-component polymer-3.x
asked Nov 16 '18 at 8:47
TihomirTihomir
748
I've created example for the snippets from the Polymer 3 dev guide. This example doesn't compile as _myLocationListener is not defined and it is used in the constructor. The listener is also not defined inside the dev guide snippet.
How this._myLocationListener property should be initialized.
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
/**
* @customElement
* @polymer
*/
class XcustomElementEventHandlingApp extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
border: dotted;
background: aliceblue;
}
</style>
<h2>Hello [[prop1]]!</h2>
<button on-click="handleClick">Kick Me</button>
<div id="child-el-01">Please, check the logs in Console (dev tools).</div>
`;
}
static get properties() {
return {
prop1: {
type: String,
value: 'xcustom-element-event-handling-app'
}
};
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
ready() {
super.ready();
this.addEventListener('click', this._onClick);
const childElement = this.shadowRoot.getElementById('child-el-01');
childElement.addEventListener('click', this._onClick.bind(this));
childElement.addEventListener('mouseover', event => this._onHover(event));
console.log('(this, the) custom element added to DOM.');
}
handleClick() {
console.log('Ow!');
}
_onClick(event) {
this._makeCoffee();
}
_makeCoffee() {
console.log('in _makeCoffee()')
}
_onHover(event) {
console.log('_onHover(ev) called');
console.log(JSON.stringify(event));
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('hashchange', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('hashchange', this._boundListener);
}
}
window.customElements.define('xcustom-element-event-handling-app', XcustomElementEventHandlingApp);
package.json:
{
"name": "xcustom-element-event-handling",
"description": "event handling demo. From dev guide.",
"dependencies": {
"@polymer/polymer": "^3.0.0"
},
"devDependencies": {
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.0"
}
}
Following exception is thrown:
Uncaught TypeError: this._myLocationListener.bind is not a function
at new XcustomElementEventHandlingApp (xcustom-element-event-handling-app.js:36)
javascript web-component polymer-3.x
javascript web-component polymer-3.x
asked Nov 16 '18 at 8:47
TihomirTihomir
748
asked Nov 16 '18 at 8:47
TihomirTihomir
748
edited Nov 16 '18 at 13:33
Tihomir
asked Nov 16 '18 at 8:47
TihomirTihomir
748
asked Nov 16 '18 at 8:47
TihomirTihomir
748
asked Nov 16 '18 at 8:47
TihomirTihomir
748
748
stackoverflow.com/help/how-to-ask
– Eugene Mihaylin
Nov 16 '18 at 9:01
Hope that latest edit did improve the question. I'm just started with Polymer 3 and am trying to run the dev. guide examples.
– Tihomir
Nov 16 '18 at 9:26
please add concrete code sample and error to the question body
– Eugene Mihaylin
Nov 16 '18 at 9:27
Thanks! Example code and link to snippet are added to question body.
– Tihomir
Nov 16 '18 at 14:34
add a comment |
stackoverflow.com/help/how-to-ask
– Eugene Mihaylin
Nov 16 '18 at 9:01
Hope that latest edit did improve the question. I'm just started with Polymer 3 and am trying to run the dev. guide examples.
– Tihomir
Nov 16 '18 at 9:26
please add concrete code sample and error to the question body
– Eugene Mihaylin
Nov 16 '18 at 9:27
Thanks! Example code and link to snippet are added to question body.
– Tihomir
Nov 16 '18 at 14:34
stackoverflow.com/help/how-to-ask
– Eugene Mihaylin
Nov 16 '18 at 9:01
stackoverflow.com/help/how-to-ask
– Eugene Mihaylin
Nov 16 '18 at 9:01
Hope that latest edit did improve the question. I'm just started with Polymer 3 and am trying to run the dev. guide examples.
– Tihomir
Nov 16 '18 at 9:26
Hope that latest edit did improve the question. I'm just started with Polymer 3 and am trying to run the dev. guide examples.
– Tihomir
Nov 16 '18 at 9:26
please add concrete code sample and error to the question body
– Eugene Mihaylin
Nov 16 '18 at 9:27
please add concrete code sample and error to the question body
– Eugene Mihaylin
Nov 16 '18 at 9:27
Thanks! Example code and link to snippet are added to question body.
– Tihomir
Nov 16 '18 at 14:34
Thanks! Example code and link to snippet are added to question body.
– Tihomir
Nov 16 '18 at 14:34
add a comment |
1 Answer
1
active
oldest
votes
1
At the above example, the main idea is if you like to listen an event from outside of this custom element. You may set up a listener inside connectedCallback and remove it with disconnectedCallback, then assign a function in the element after event occure.
Something like
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="x-custom.js"></script>
</head>
<body>
<button>This button not in the element</button>
<x-custom></x-custom>
</body>
</html>
x-custom.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.12/polymer-element.js';
class XCustom extends PolymerElement {
static get template() {
return html`<h2>Hello </h2> `;
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('click', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('click', this._boundListener);
}
_myLocationListener(){
alert('This click comes from index.html - out of this element')
}
}
window.customElements.define('x-custom', XCustom);
DEMO
answered Nov 16 '18 at 18:20
HakanCHakanC
2,3543814
Thank you very much! Additionally we can add an id to button to listen only button clicks: window.document.getElementById('xyz1').addEventListener('click', this._boundListener);
– Tihomir
Nov 17 '18 at 6:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334284%2fevent-example-from-polymer-3-devguide-listener-on-outside-elements-throws-an-e%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
At the above example, the main idea is if you like to listen an event from outside of this custom element. You may set up a listener inside connectedCallback and remove it with disconnectedCallback, then assign a function in the element after event occure.
Something like
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="x-custom.js"></script>
</head>
<body>
<button>This button not in the element</button>
<x-custom></x-custom>
</body>
</html>
x-custom.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.12/polymer-element.js';
class XCustom extends PolymerElement {
static get template() {
return html`<h2>Hello </h2> `;
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('click', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('click', this._boundListener);
}
_myLocationListener(){
alert('This click comes from index.html - out of this element')
}
}
window.customElements.define('x-custom', XCustom);
DEMO
answered Nov 16 '18 at 18:20
HakanCHakanC
2,3543814
Thank you very much! Additionally we can add an id to button to listen only button clicks: window.document.getElementById('xyz1').addEventListener('click', this._boundListener);
– Tihomir
Nov 17 '18 at 6:34
add a comment |
1
At the above example, the main idea is if you like to listen an event from outside of this custom element. You may set up a listener inside connectedCallback and remove it with disconnectedCallback, then assign a function in the element after event occure.
Something like
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="x-custom.js"></script>
</head>
<body>
<button>This button not in the element</button>
<x-custom></x-custom>
</body>
</html>
x-custom.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.12/polymer-element.js';
class XCustom extends PolymerElement {
static get template() {
return html`<h2>Hello </h2> `;
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('click', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('click', this._boundListener);
}
_myLocationListener(){
alert('This click comes from index.html - out of this element')
}
}
window.customElements.define('x-custom', XCustom);
DEMO
answered Nov 16 '18 at 18:20
HakanCHakanC
2,3543814
Thank you very much! Additionally we can add an id to button to listen only button clicks: window.document.getElementById('xyz1').addEventListener('click', this._boundListener);
– Tihomir
Nov 17 '18 at 6:34
add a comment |
1
1
1
At the above example, the main idea is if you like to listen an event from outside of this custom element. You may set up a listener inside connectedCallback and remove it with disconnectedCallback, then assign a function in the element after event occure.
Something like
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="x-custom.js"></script>
</head>
<body>
<button>This button not in the element</button>
<x-custom></x-custom>
</body>
</html>
x-custom.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.12/polymer-element.js';
class XCustom extends PolymerElement {
static get template() {
return html`<h2>Hello </h2> `;
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('click', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('click', this._boundListener);
}
_myLocationListener(){
alert('This click comes from index.html - out of this element')
}
}
window.customElements.define('x-custom', XCustom);
DEMO
answered Nov 16 '18 at 18:20
HakanCHakanC
2,3543814
At the above example, the main idea is if you like to listen an event from outside of this custom element. You may set up a listener inside connectedCallback and remove it with disconnectedCallback, then assign a function in the element after event occure.
Something like
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="x-custom.js"></script>
</head>
<body>
<button>This button not in the element</button>
<x-custom></x-custom>
</body>
</html>
x-custom.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.12/polymer-element.js';
class XCustom extends PolymerElement {
static get template() {
return html`<h2>Hello </h2> `;
}
constructor() {
super();
this._boundListener = this._myLocationListener.bind(this);
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('click', this._boundListener);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('click', this._boundListener);
}
_myLocationListener(){
alert('This click comes from index.html - out of this element')
}
}
window.customElements.define('x-custom', XCustom);
DEMO
answered Nov 16 '18 at 18:20
HakanCHakanC
2,3543814
answered Nov 16 '18 at 18:20
HakanCHakanC
2,3543814
answered Nov 16 '18 at 18:20
HakanCHakanC
2,3543814
answered Nov 16 '18 at 18:20
HakanCHakanC
2,3543814
2,3543814
Thank you very much! Additionally we can add an id to button to listen only button clicks: window.document.getElementById('xyz1').addEventListener('click', this._boundListener);
– Tihomir
Nov 17 '18 at 6:34
add a comment |
Thank you very much! Additionally we can add an id to button to listen only button clicks: window.document.getElementById('xyz1').addEventListener('click', this._boundListener);
– Tihomir
Nov 17 '18 at 6:34
Thank you very much! Additionally we can add an id to button to listen only button clicks: window.document.getElementById('xyz1').addEventListener('click', this._boundListener);
– Tihomir
Nov 17 '18 at 6:34
Thank you very much! Additionally we can add an id to button to listen only button clicks: window.document.getElementById('xyz1').addEventListener('click', this._boundListener);
– Tihomir
Nov 17 '18 at 6:34
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334284%2fevent-example-from-polymer-3-devguide-listener-on-outside-elements-throws-an-e%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
stackoverflow.com/help/how-to-ask
– Eugene Mihaylin
Nov 16 '18 at 9:01
Hope that latest edit did improve the question. I'm just started with Polymer 3 and am trying to run the dev. guide examples.
– Tihomir
Nov 16 '18 at 9:26
please add concrete code sample and error to the question body
– Eugene Mihaylin
Nov 16 '18 at 9:27
Thanks! Example code and link to snippet are added to question body.
– Tihomir
Nov 16 '18 at 14:34