Aurelia Custom Element funktioniert nicht in Flex-Container

Hallo, wir haben vor kurzem begonnen, benutzerdefinierte Elemente in Aurelia zu machen. Eine der Regeln, die wir festgelegt haben, ist, dass wir keine benutzerdefinierten Klassenelemente für ihre Verwendung verwenden können.Aurelia Custom Element funktioniert nicht in Flex-Container

Dies verursacht Probleme für mich, weil das benutzerdefinierte Element selbst keine Eigenschaften hat, so dass es viel Styling bricht.

Insbesondere bricht es, wenn es in einen Flex-Container gesteckt wird.

Ich habe auf developers.google.com gelesen, dass Sie das benutzerdefinierte Element mit dem :host Selektor stylen können, aber ich kann keine Erwähnung von diesem für Aurelia finden und ich kämpfe, um es zur Arbeit zu bekommen.

Ich habe einen Codepen zur Demonstration des Problems here.

Quelle

2017-02-24 IOIIOOIO

Legen Sie Ihre individuelle Element in der Flex-Artikel div:

<div class="half-container"> 
    <p>Breaking because of custom element (Flex container is yellow)</p> 
    <div class="flex-container"> 
    <div class="flex-item"></div> 
    <div class="flex-item"></div> 
    <div class="flex-item green">  
     <o-custom-element></o-custom-element> 
    </div> 
    </div> 
</div>

Wenn Sie :host verwenden möchten, müssen Sie es in einem <style> Element innerhalb des Schatten DOM Ihrer benutzerdefinierten Element setzen müssen: http://codepen.io/anon/pen/LWYwxK

Das Problem ist, dass Sie die Regeln duplizieren und es ist noch schlechter als die Klassen, um benutzerdefinierte Element Hinzufügen ...

Quelle

2017-02-24 12:24:55 Supersharp

ich auf die Änderung der Regel lehnen aber es ist nicht mein Anruf. Wir arbeiten in einem großen Team an einem großen Projekt, also haben sie diese Regel getroffen, um Dinge unter Kontrolle zu bringen. Ich wünschte nur, ich könnte eine Demo erstellen, bei der der Host aus dem Shadow Dom mit dem: host selector gestylt wird. Das wäre eine Lösung, die für uns funktionieren würde. – IOIIOOIO

@IOIIOOIO Ich habe ein Beispiel mit der Verwendung von: Host hinzugefügt. – Supersharp

Oh wow .. so einfach ... danke Millionen Ich werde an so etwas arbeiten. Sollte ein Ende für meine Kopfschmerzen sein! – IOIIOOIO

Sie können Stil benutzerdefinierte Elemente fi durch Bezugnahme auf das Element selbst, wie folgt aus:

o-custom-element { 
    color: white; 
    background: green; 
    flex-grow: 1; 
}

Ich habe Ihre codepen gegabelt die Änderung zeigen: http://codepen.io/anon/pen/ZeEdLL

Quelle

2017-02-24 12:52:38 Daniel

Leider können wir eine andere Regel von uns nicht tun – IOIIOOIO

Hmm, ich schließe das immer mit der Komponente ein (wo '' host' wäre, auch?) Und 'require' die css in der Ansicht der Komponente. IMO das ist so gut wie ': Host' selbst, im Grunde ist es nur ein anderer Name dafür. Aber es ist interessant, warum ': host' nicht mit Aurelia funktioniert. – Daniel

Danke Daniel, daran habe ich nicht gedacht. Es könnte sein, dass ich es falsch gemacht habe. Wenn ich '' Host' 'nicht zum arbeiten bekomme, probiere ich die '' Methode. Die Sache ist, dass unser gesamtes Team für benutzerdefinierte Elemente neu ist, so dass wir alle lernen, während wir weitermachen. Wir müssen also darauf achten, dass Joe Soap nicht jedes Mal außer Kontrolle gerät, wenn er eine neue Idee hat. – IOIIOOIO

Aurelia Custom Element funktioniert nicht in Flex-Container

Antwort

Verwandte Themen