在聚合物元素的模板中使用飞镖动态更新样式表

Question

我正在按照 this other SO page 中的描述动态更新我的样式表。一般来说它工作得很好，但它不适用于我的聚合物元素模板中的 HTML DOM 标签（例如，我无法更改 .above-board 的样式）。

你知道我怎样才能让它发挥作用吗？除了将样式更改直接嵌入每个元素的 HTML 而不是使用类之外。显示下面的代码（尝试删除尽可能多的不相关代码）：

index.html

<!DOCTYPE html>
<html lang="en">

    ...

    <body>
        <div class="main">
            <panepond-board class="player1"></panepond-board>
        </div>
        <script type="application/dart" src="board.dart"></script>
    </body>
</html>

component.html

<link rel="import" href="packages/polymer/polymer.html"/>
<polymer-element name="panepond-board">
    <template>
        <div class="above-board">
            <input type="button" value="toggle config" on-click="{{toggleConfig}}" class="update"/><br/>
            <label>score: {{totalScore}}</label>
        </div>

        ...

        <link rel="stylesheet" href="board.css"/>
    </template>
</polymer-element>
<script type="application/dart" src="board.dart"></script>

board.dart

import 'dart:html';
import 'dart:async';
import 'dart:math';
import 'package:polymer/polymer.dart';
import "package:range/range.dart";
import 'config.dart';

main() {
    initPolymer().run(() {
        Polymer.onReady.then((_) {
            var board1 = querySelector('.player1');
            window.onKeyDown.listen( (e) {
                board1.actOnKeyDown(new String.fromCharCodes([e.keyCode]));
            });
            board1.init();
        });
    });
}


@CustomTag('panepond-board')
class Board extends PolymerElement {
    @observable Config config = new Config(6);
    Board.created() : super.created();

    void init() {
        config.loadCSS();
    }

config.dart

import 'package:polymer/polymer.dart';
import 'dart:async';
import 'dart:convert';
import 'dart:html';

class Config extends Observable {
        num width;
        Config(w) : width = w;

        void loadCSS() {
            StyleElement styleElement = new StyleElement();
            document.head.append(styleElement);
            CssStyleSheet sheet = styleElement.sheet;
            final rule1 = '.above-board { border: 1px solid blue; }';
            sheet.insertRule(rule1, sheet.cssRules.length); //this doesn't show any effect
            final rule2 = '.main { border: 1px solid red; }';
            sheet.insertRule(rule2, sheet.cssRules.length); //this works fine
        }
}

如果我在 board.css 上手动附加 .above-board{border: 1px solid blue;}，该规则将按预期工作（即它会显示蓝色边框）。否则，以编程方式执行此操作（请参阅上面的 rule1）没有任何效果。

Answer 1

我觉得

document.head.append(styleElement);

应该是

document.querySelector('panepond-board.player1')
    .shadowRoot.append(styleElement);

在聚合物元素的模板中使用飞镖动态更新样式表

Dynamically update a stylesheet using dart within a template in a polymer-element

html

css

dom

dart

dart-polymer

index.html

component.html

board.dart

config.dart