How to create shadow DOM programmatically in Dart?

Question

I'm trying to implement the following JS code in Dart way:

Code is taken from here: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

<div id="host">Host node</div>
<script>
var root = document.querySelector('#host').createShadowRoot();
root.innerHTML = '<style>' + 
    'button {' + 
      'color: green;' + 
    '}' +
    '</style>' +
    '<content></content>';
</script>

I have no doubt that in JS it works ok, but in Dart it fails. As we know the only one dart script per document is allowed, so I was forced to place it to the shared dart file:

main.dart

import 'dart:html';
void main() {
  querySelector('#host').createShadowRoot().appendHtml('<style>' +
    'button {' +
      'color: green;' +
    '}' +
    '</style>' +
    '<content></content>');
}

If we try to append any other html tags such as div, ul etc everything works ok. However in case of style and content it differs. I get the warning:

Removing disallowed element <CONTENT>
Removing disallowed element <STYLE>

Please, tell me why?

Update:

@GünterZöchbauer Regarding passing the NodeValidatorBuilder() to appendHtml() method. Please, see the picture: enter image description here

Final result:

var validator = new NodeValidatorBuilder.common()
  ..allowElement('content', attributes: ['some-attribute', 'some-other'])
  ..allowElement('style');
querySelector('#host').createShadowRoot()
..append(document.body.createFragment('<style>' +
  'button {' +
    'color: green;' +
  '}' +
  '</style>' +
  '<content></content>', validator: validator))
// For illustrative purposes, add the button with some text to test styles
..querySelector('content').append(new ButtonElement()..text = 'Button');

Günter Zöchbauer · Accepted Answer · 2015-04-15 08:11:53Z

2

This is some default XSS prevention in dart:html. You need to pass a NodeValidator to appendHtml which specifies which elements and attributes are allowed.

var validator new NodeValidatorBuilder.common()
  ..allowElement('content', attributes: ['some-attribute', 'some-other'])
  ..allowElement('style');

... .append(document.body.createFragment(
    '...some html...', validator: validator));

edited Apr 15, 2015 at 8:11

answered Apr 15, 2015 at 7:45

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Timur Fayzrakhmanov Over a year ago

Hm.., appendHtml() can take only one argument. If so where to place validator variable?

Günter Zöchbauer Over a year ago

I stole it from stackoverflow.com/a/24002691/217408 I'm pretty sure I tried it back then. Maybe you need to use another method. I'll have a look...

Collectives™ on Stack Overflow

How to create shadow DOM programmatically in Dart?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related