How to add dynamic styles to the shadow DOM
index.html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<link rel="import" href="nav-ponent.html">
</head>
<body>
<app-nav></app-nav>
</body>
</html>
nav-ponent.html
<template>
<style>
.btn {
background-color: green;
padding: 10px 20px;
}
</style>
<button onclick="getstyles()">ENTER</button>
</template>
<script src="nav-ponent.js"></script>
nav-ponent.js
let template = document.currentScript.ownerDocument.querySelector('template');
let clone = document.importNode(template.content, true);
let proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
let root = this.createShadowRoot();
root.appendChild(clone);
}
document.registerElement('app-nav', {
prototype: proto
});
function getstyles() {
console.log('it works');
document.querySelector('button').classList.add('btn');
// document.currentScript.ownerDocument.querySelector('button').classList.add('btn');
}
have to add btn class to button element , so that its styles added to button element
got error Uncaught TypeError: Cannot read property 'classList' of null
Demo
How to add dynamic styles to the shadow DOM
index.html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<link rel="import" href="nav-ponent.html">
</head>
<body>
<app-nav></app-nav>
</body>
</html>
nav-ponent.html
<template>
<style>
.btn {
background-color: green;
padding: 10px 20px;
}
</style>
<button onclick="getstyles()">ENTER</button>
</template>
<script src="nav-ponent.js"></script>
nav-ponent.js
let template = document.currentScript.ownerDocument.querySelector('template');
let clone = document.importNode(template.content, true);
let proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
let root = this.createShadowRoot();
root.appendChild(clone);
}
document.registerElement('app-nav', {
prototype: proto
});
function getstyles() {
console.log('it works');
document.querySelector('button').classList.add('btn');
// document.currentScript.ownerDocument.querySelector('button').classList.add('btn');
}
have to add btn class to button element , so that its styles added to button element
got error Uncaught TypeError: Cannot read property 'classList' of null
Demo
Share Improve this question edited May 30, 2017 at 9:24 bhv asked May 30, 2017 at 9:15 bhvbhv 5,3983 gold badges36 silver badges44 bronze badges 2- can't you not use Jquery? $('#buttonId').addClass('btnClass') – Oscarlito Allentot Commented May 30, 2017 at 9:28
-
1
FYI,
document.registerElementis deprecated: developer.mozilla/de/docs/Web/API/Document/registerElement – nils Commented May 30, 2017 at 9:31
2 Answers
Reset to default 3First of all document.registerElement is deprecated so I answered class based custom element solution here...
The solution is to get the document from document.currentScript.ownerDocument
class AppNavElement extends HTMLElement {
constructor() {
super()
// import from ownerDocument
const importDoc = document.currentScript.ownerDocument;
let shadowRoot = this.attachShadow({mode: 'open'});
const template = importDoc.querySelector('#template');
const instance = template.content.cloneNode(true);
shadowRoot.appendChild(instance);
// Event Listener
this.addEventListener('click', e => this.changeStyle());
}
changeStyle() {
this.shadowRoot.querySelector('button').classList.add('btn')
}
}
customElements.define('app-nav', AppNavElement)
Update:
To listen the button element only use the connectedCallback thanks @bhv
connectedCallback() {
let btn = this.shadowRoot.querySelector('button')
// Event Listener
btn.addEventListener('click', e => this.changeStyle());
}
You can also simply get the <button> element from the event.target property :
function changeStyle() {
console.log('it works');
event.target.classList.add('btn');
}
...
<button onclick="changeStyle()">ENTER</button>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745105180a4611513.html
评论列表（0条）