Rendu de composants dans Aurelia sans le noeud DOM intermédiaire

Question

Est-il possible de rendre des modèles d'éléments personnalisés directement dans Aurelia sans le noeud d'encapsulation d'élément personnalisé supplémentaire?

Par exemple, disons, j'ai un composant comme tel:

// -- component.js 
export class UiComponent {} 

// -- component.html 
<template> 
    <div class="ui-component"> 
     { ... some content ... } 
    </div> 
</template> 

... et j'ai un composant wrapper rendu ui composants comme tel:

// -- wrapper.js 
export class UiWrapper {} 

// -- wrapper.html 
<template> 
    <require from="/path/to/component.js"></require> 

    <div class="ui-wrapper"> 
     <ui-component></ui-component> 
    </div> 
</template> 

Ce serait résultat dans l'arbre DOM à la recherche quelque chose comme ça:

<ui-wrapper> 
    <div class="ui-wrapper"> 
     <ui-component> 
      <div class="ui-component"> 
       { ... some content ... } 
      </div> 
     </ui-component> 
    </div> 
</ui-wrapper> 

---

La question: est-il possible de rendre le DOM sans le bruit de balisage supplémentaire que les éléments personnalisés génèrent?

<div class="ui-wrapper"> 
    <div class="ui-component"> 
     { ... some content ... } 
    </div> 
</div> 

---

Pourquoi je veux ceci:.

• Je n'aime pas coiffer les emballages d'éléments personnalisés eux-mêmes (par exemple, le <ui-component> ou <ui-wrapper> je crois qu'il est le bruit balisage que je Je ne peux pas manipuler ses classes, je ne peux pas non plus y attacher directement des gestionnaires d'événements

• Sur les éléments qui utilisent repeat.for, je ne peux pas simplement utiliser :last-child sélecteurs css. Je devrais ajouter encore une autre vérification de classe en utilisant ${ $last ? 'is-last-child' : '' }, qui est encore, est le bruit de balisage. Ces éléments intermédiaires cassent la marge de tout ce qui est à l'intérieur. Au lieu d'agir comme des marges réelles (qui s'effondrent lorsque les marges "entrent en collision"), mes marges sont doublées entre les composants car le nœud d'élément personnalisé enveloppe l'élément margin-ed dans un conteneur de bloc sans aucune marge.

---

J'espère que tous fait sens. Je vous remercie.

Answer 1

Vous pouvez utiliser

// -- component.js 
    import {containerless} from 'aurelia-framework'; 

    @containerless 
    export class UiComponent {} 

comme décrit here