使用classList从JavaScript动态添加Web组件中的类

Question

How to add dynamic styles to the shadow DOM 如何向阴影DOM添加动态样式

index.html index.html

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <link rel="import" href="nav-component.html">
</head>
<body>
    <app-nav></app-nav>
</body>
</html>

nav-component.html nav-component.html

<template>
  <style>
    .btn {
        background-color: green;
        padding: 10px 20px;
    }
  </style>
    <button onclick="getstyles()">ENTER</button>
</template>
<script src="nav-component.js"></script>

nav-component.js nav-component.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 必须将btn类添加到button元素 ，以便将其样式添加到button元素

got error Uncaught TypeError: Cannot read property 'classList' of null 错误Uncaught TypeError：无法读取null的属性“ classList”

Demo 演示版

Answer 1

First of all document.registerElement is deprecated so I answered class based custom element solution here... 首先不建议使用document.registerElement ，因此我在这里回答了基于类的自定义元素解决方案...

The solution is to get the document from document.currentScript.ownerDocument 解决方案是从document.currentScript.ownerDocument获取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谢谢@bhv

connectedCallback() { 
    let btn = this.shadowRoot.querySelector('button') 
    // Event Listener 
    btn.addEventListener('click', e => this.changeStyle()); 
}

Answer 2

You can also simply get the <button> element from the event.target property : 您还可以简单地从event.target属性获取<button>元素：

function changeStyle() {
    console.log('it works');
    event.target.classList.add('btn');
}

...

<button onclick="changeStyle()">ENTER</button>

使用classList从JavaScript动态添加Web组件中的类

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-05-30 10:29:49

解决方案2
1 2017-05-31 20:58:43

使用classList从JavaScript动态添加Web组件中的类

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-05-30 10:29:49

解决方案2 1 2017-05-31 20:58:43

解决方案1
3 已采纳 2017-05-30 10:29:49

解决方案2
1 2017-05-31 20:58:43