HTML5 benutzerdefinierte Elemente Platzhalter CSS-Selektor

Question

Ich habe eine Reihe von benutzerdefinierten HTML-Elemente wie Esel bar-el, bar-el2, foo, foo-bar, foo-bar-2. Ich kann Folgendes tun:

<bar-el class="custom-bar"> 
    <foo class="custom-foo"> 
    <foo-bar name="bar" class="custom-foo"> 
     Content 
    </foo-bar> 
    <foo-bar2 name="bar2" class="custom-foo"> 
     Content 
    </foo-bar2> 
    </foo> 
</bar> 

Leider aufgrund der Codegenerierung ist es nicht immer möglich, Klasse und andere Attribute für meine benutzerdefinierten Elemente zu setzen, also würde ich gerne wissen, ob es möglich ist, einen CSS-Selektor schreiben das entspricht allen foo und foo-* Elementen?

Answer 1

Sie können Regexp-Selektoren nicht für Tag-Namen verwenden. Sie können Regexps nur für Attributwerte ausführen.

Sie könnten Ihre eigene JavaScript-Funktion erstellen, die alle Elemente mithilfe von document.querySelectorAll('*') abruft, einen Zeichenfolgenvergleich für jedes Element im Ergebnis mit tagName ausführt und nur die übereinstimmenden Elemente zurückgibt.

Wenn Sie den HTML-Code nicht ändern können, um ein gemeinsames Attribut zu erstellen, würde ich lieber alle Varianten ausschreiben.