少侠留步，吾有一惑不解，不知少侠能否掌眼一观？如若明了，定当拜谢！（是关于用TypeScript自定义标签动态生成后所设置的动画不显示）shadow-root内的元素设置动画无效。

Question

我自定义了一个html标签如下：
配置是ES6编译；

class Card extends HTMLElement {
    static get observedAttributes() {
        return ['width', 'height']
    }
    attributeChangedCallback(attr, oldValue, newValue) {
        this.render()
    }
    disconnectedCallback() {
    }
    get width() {
        return this.getAttribute('width') || "620"
    }
    get height() {
        return this.getAttribute('height') || "300"
    }
    set width(v) {
        this.setAttribute('width', v);
    }
    set height(v) {
        this.setAttribute('height', v);
    }
    Backgroud;
    constructor(paramSrt) {
        super();
        this.ParamsString = paramSrt;
        this.UUID = Helper.generateUUID();
        this.render();
    }
    render() {

        var shadowRoot = this.shadowRoot || this.attachShadow({ mode: 'open' });
        this.CardBox = document.createElement("div");
        this.CardBox.style.float = "left";
        this.CardBox.style.marginLeft = "10px";
        this.CardBox.style.marginTop = "10px";
        this.CardBox.style.setProperty("height", this.height + "px");
        this.CardBox.style.setProperty("width", this.width + "px");
        this.CardBox.style.setProperty("background", (this.Backgroud == undefined ? "#505050" : this.Backgroud));
                /////////////////////////////////////////////////////////////
        this.CardBox.style.animationName = "shineBlue"; 
        this.CardBox.style.animationDuration = "3s";     
        this.CardBox.style.animationIterationCount = "infinite";
                /////////////////////////////////////////////////////////////
        shadowRoot.innerHTML = ""
        shadowRoot.appendChild(this.CardBox);
                }
}

在主函数中注册了它：customElements.define('dfcard-a', Card);
其中斜杠中的代码为添加动画，动画样式如下：
动画特效引用自博主 第2016换个昵称 的博客 https://blog.csdn.net/zk437092645/article/details/8641486

@keyframes shineBlue {
    from {
        box-shadow: 0 0 9px #333;
    }

    50% {
        box-shadow: 0 0 18px blue;
    }

    to {
        box-shadow: 0 0 9px #333;
    }
}

下面是使用js创建标签：

    function(paramStr){
        var divPanel = document.getElementById("scanTable");
    var card = new Card(paramStr);
        divPanel.appendChild(card);
        }

结果是在页面上显示时其他样式都行，唯独这个动画不肯就范，请问这是为何？
动画效果： https://blog.csdn.net/zk437092645/article/details/8641486

如下是生成后的html标签，标签上样式都设置起了，但是却不起作用：

样式表也是正常加载了的：

动画不起作用是不是因为shadow-root的原因？

Answer 1

https://blog.csdn.net/qq_29722281/article/details/95306173