Enable Shadow DOM through HTML

[EisenbergEffect]

🙋 Feature Request

HTML Only elements should be able to declare that they use shadow dom.

🤔 Expected Behavior

Developers should be able to declare shadow dom use through HTML, not just JavaScript.

😯 Current Behavior

Shadow DOM can only be enabled through JavaScript.

💁 Possible Solution

See here for vCurrent: See here for the vCurrent behavior: aurelia/templating-resources#368

[EisenbergEffect]

@3cp this might be an interesting one to pick up while you are doing the shadow dom convention.

[3cp]

Sounds good. Following per-file attribute will overwrite the option on bundler plugin.

<template use-shadow-dom>
<template use-shadow-dom="open">
<template use-shadow-dom="closed">

Different from vcurrent, the use-shadow-dom attribute will be stripped off from the html text during preprocessing. Unless you have a reason to retain it for runtime usage.

[3cp]

Since Aurelia 2 recommends to move import/require to above template tag, while supporting existing use-shadow-dom attribute, should we also recommend following syntax?

<use-shadow-dom mode="closed">
<import from="./foo.css">

<template></template>

The mode="closed" reads better than use-shadow-dom="closed".

Note, the closing </use-shadow-dom> is not required because the whole thing will be preprocessed.

[EisenbergEffect]

I do like the fact that mode is an explicit attribute, which enables us to support other shadow dom properties in the future. I'd like to hear some other opinions on this though, since historically we've only had the require/import as a special case element and things like this have been put on the template.