I wonder if someone already run into the following issue:
I am trying to use ion custom elements in standard custom elements, but the ion custom elements do not seem to work properly when used within the shadow root.
I created a small test that shows the problem
both custom elements should render a black button, but only the UsingInnerHtml element works as expected, the UsingShadowRoot renders a transparent button no matter which color value I provide
class UsingInnerHtml extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-button color="dark">Click me</ion-button>
`;
}
}
const template = document.createElement('template');
template.innerHTML = `
<ion-button color="dark">Click me</ion-button>
`;
class UsingShadowRoot extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('using-shadow-root', UsingShadowRoot);
customElements.define('using-inner-html', UsingInnerHtml);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<!-- styles -->
<link href="https://unpkg.com/#ionic/core#latest/css/ionic.bundle.css" rel="stylesheet">
<!-- Libs -->
<script type="module" src="https://unpkg.com/#ionic/core#latest/dist/ionic/ionic.esm.js"></script>
<script nomodule="" src="https://unpkg.com/#ionic/core#latest/dist/ionic/ionic.js"></script>
<script type="module" src="https://unpkg.com/ionicons#latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons#latest/dist/ionicons/ionicons.js"></script>
</head>
<body>
<div>
shadow root
<using-shadow-root></using-shadow-root>
</div>
<div>
inner html
<using-inner-html></using-inner-html>
</div>
</body>
</html>
Related
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Youpotify</title>
</head>
<body>
<div class="download">
<div class="video">
<button id="video">Download this video</button>
</div>
<div class="playlist">
<button id="playlist">Download this playlist</button>
</div>
<div class="channel">
<button id="channel">Download this channel</button>
</div>
</div>
<script>
document.getElementById("video").addEventListener("click", () => {
document.getElementById("video").style.backgroundcolor = "red";
});
</script>
</body>
</html>
I loaded this addon on Temporary Extension and I click the button but the background color did not change.
I wanted to run my JavaScript file in firefox addon popup HTML file, but it didn't work.
There are a couple of potential issues here:
First, inline Javascript (inside <script></script> tags) is not permitted by default.
To include Javascript to your popup, you need to put it into a separate Javascript file and reference is with:
<script src="index.js"></script>
where your index.js is in the same folder and has your code:
document.getElementById("video").addEventListener("click", () => {
document.getElementById("video").style.backgroundColor = "red";
});
Second,
document.getElementById("video").style.backgroundcolor = "red";
has incorrect attribute, it should be style.backgroundColor with a capital C.
I want to set up a very basic project with Vite vanilla
I scaffolded the project with yarn create #vitejs/app
Now I adjusted the following files:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="main.js"></script>
</head>
<body>
<div id="app">
<h1>Chat</h1>
Message
<br/>
<textarea placeholder="Message"></textarea>
<button onclick="sendMessage()">Send</button>
</div>
</body>
</html>
style.css
h1 {
color: blue;
}
main.js
console.log('hello main.js')
const chatInput = document.querySelector('textarea')
export function sendMessage() {
let message = chatInput.value
window.alert(message)
chatInput.value = "";
}
I am now getting the following error in the browser console when I click the "Send" button
client.ts:13 [vite] connecting...
main.js:35 hello main.js
client.ts:43 [vite] connected.
(index):18 Uncaught ReferenceError: sendMessage is not defined
at HTMLButtonElement.onclick ((index):18)
Workaround
I can work around the problem by adding an event listener to the button instead of adding the onclick directly in the HTML
const sendButton = document.querySelector('button')
sendButton.addEventListener('click', sendMessage)
But why can't you use the first approach with onclick="sendMessage()" within the HTML?
Main.js is added as a type=module. Module creates a scope to avoid name collisions.
You can either expose your function to the window object
import { sendMessage } from './events.js'
window.sendMessage = sendMEssage
Or use the addEventListener method to bind the handler like you're doing.
I'm writing a very basic WYSIWYG rich editor using Polymer 2.0 and contenteditable attribute of a div but experiencing issues with document.execCommand and executing the command insertunorderedlist. If you select and highlight the text you want to insert an unordered list and click button then it either fails to work correctly using Chrome (latest version) or if using Safari (latest version High Sierra), just hangs. If you try this outside of Polymer (plain old html and javascript) it works fine. Any ideas how to get this working with Polymer 2.0? Here's my code:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="polymerbasic-app">
<template>
<style>
:host {
display: block;
}
</style>
<button on-click="_insertunorderedlist" type="button">Insert Unordered List</button>
<div id="textBox" contenteditable="true">
Bullet One
<br> Bullet Two
<br> Bullet Three
</div>
</template>
<script>
/**
* #customElement
* #polymer
*/
class PolymerbasicApp extends Polymer.Element {
static get is() { return 'polymerbasic-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'polymerbasic-app'
}
};
}
_insertunorderedlist() {
document.execCommand("insertunorderedlist", false, null); this.$.textBox.focus();
}
}
window.customElements.define(PolymerbasicApp.is, PolymerbasicApp);
</script>
</dom-module>
And index.html:
<!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>polymerbasic</title>
<meta name="description" content="polymerbasic description">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/polymerbasic-app/polymerbasic-app.html">
</head>
<body>
<polymerbasic-app></polymerbasic-app>
</body>
</html>
I'm building a custom element. this is my code:
<!DOCTYPE html>
<html>
<template>
<link rel="stylesheet" type="text/css" href="pols-notifier.css">
<div class="body">
<button class="close"></button>
<div class="content"></div>
</div>
</template>
<script>
class PolsNotifier extends HTMLElement {
constructor() {
super();
this.currentDocument = document.currentScript.ownerDocument;
}
connectedCallback() {
const instance = this.currentDocument.querySelector('template').content.cloneNode(true);
this.attachShadow({mode: 'open'}).appendChild(instance);
}
}
window.customElements.define('pols-notifier', PolsNotifier);
</script>
</html>
And the page is:
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="http://localhost:8080/assets/pols-notifier/pols-notifier.html">
<body>
<pols-notifier></pols-notifier>
</body>
</html>
The console show an error when try load the stylesheet. The file of custom element and the stylesheet are in /assets/pols-notifier directory in my project but the navigator is looking /pols-notifier.css.
Why is looking there?
Greeting. Thanks.
This my index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="import" href="component.html">
</head>
<body>
<tag-name></tag-name>
</body>
</html>
and this is my component.html
<template>
<style></style>
<div>test</div>
</template>
<script>
customElements.define('tag-name', class extends HTMLElement {
constructor() {
super();
/*var tmpl = document.querySelector('link[href$="component.html"]').import
.querySelector('template').content.cloneNode(true);*/
var currentScript = document.currentScript;
var tmpl = currentScript.previousSibling.content.cloneNode(true);
this.attachShadow({
mode: 'open'
}).appendChild(tmpl);
}
});
</script>
I tried to don't use ' ...querySelector('link[href$="component.html"]').import ..' I've inserted it in comment. I wanted to reference to template tag without insert 'component.html'. It doesn't work but I don't understand why.