CODEWITHSUNDEEP
htmlcssdomdartdart-polymer
isaacbernat
isaacbernat

Reputation: 395

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

I am dynamically updating my stylesheet as described in this other SO page. In general it works great, but it doesn't for the HTML DOM tags I have within my polymer element template (e.g. I can not change the style of .above-board).

Do you have an idea how could I make it work? Apart from embedding the style changes directly in the HTML for each element instead of using classes. Showing the code below (tried to remove as much non-relevant code as possible):

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
        }
}

If I manually append .above-board{border: 1px solid blue;} on board.css, the rule will work as expected (i.e. it will display the blue border). Otherwise, doing it programmatically (see rule1 above) has no effect.

Upvotes: 1

Views: 475

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

I think 

document.head.append(styleElement);

should be

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

Upvotes: 1

Related Questions