Tabelle als Custom Element

[JürgenB]

Hallo,

ich möchte meinen Tabellensortierer als Custom Element anlegen. Leider sind die Tabellenelemente, wie z.B. tbody oder tr nur in table erlaubt. Wenn ich sie in ein x-table legen, verlieren sie ihre Tabelleneigenschaften, bzw. sie werden garnicht im DOM angelegt. Aus

<x-table>
  <tbody>
    <tr>
      <td>
        A
      </td>
      <td>
        B
      </td>
    </tr>
    <tr>
      <td>
        C
      </td>
      <td>
        D
      </td>
    </tr>
  </tbody>
 </x-table>

macht der Browser

<x-table>
 A B C D
</x-table>

Wenn ich dann den Inhalt des <x-table> per innerHTML in ein <table> im Schattendom kopiere, kommt leider auch nur der Inhalt der <td> an.

Gibt es eine Möglichkeit, das <x-table> zu einer Tabelle zu machen? Oder gibt es eine Möglichkeit, den Inhalt des <x-table> wie im Quelltext zu kopieren.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

hast Du schon versucht, <x-table> mit dem Style display:table zu versehen?

Im Übrigen bin ich nicht sicher, ob es klug ist, eine Tabelle im Shadow-DOM zu „verstecken“. Der Zugriff ist dann gekapselt, und Script auf der Seite, die die Tabelle verwendet, kommt nicht mehr so einfach an die Tabellenelemente heran. Glaub ich jedenfalls - ich habe mich mit Shadow DOM noch nicht wirklich befasst.

Ist das eher nützlich oder eher störend?

Aus meiner Sicht sollte ein custom element eine kleine, fest definierte Aufgabe erfüllen und sich nicht eine ganze Tabelle einverleiben. Aber das ist nur meine kleine, unmaßgebliche Meinung.

Rolf

[JürgenB]

Hallo Rolf,

hast Du schon versucht, <x-table> mit dem Style display:table zu versehen?

ja, hat keinen Effekt.

Im Übrigen bin ich nicht sicher, ob es klug ist, eine Tabelle im Shadow-DOM zu „verstecken“. Der Zugriff ist dann gekapselt, und Script auf der Seite, die die Tabelle verwendet, kommt nicht mehr so einfach an die Tabellenelemente heran. Glaub ich jedenfalls - ich habe mich mit Shadow DOM noch nicht wirklich befasst.

der Zugriff von Außen ist möglich.

Ist das eher nützlich oder eher störend?

Aus meiner Sicht sollte ein custom element eine kleine, fest definierte Aufgabe erfüllen und sich nicht eine ganze Tabelle einverleiben. Aber das ist nur meine kleine, unmaßgebliche Meinung.

Ich möchte einen Tabellensortierer, der die Tabelle z.Zt. über <table class="sortierbar"> erkennt, auf sort-table umstellen. <table is="sorttable> wird vom Safari nicht (nie) unterstützt.

Ich suche so etwas wie .innerQuelltext

Gruß
Jürgen

[Tabellenkalk]

Hallo,

<table is="sorttable>

Wirklich „sorttable“ statt „sortable“?

Gruß
Kalk

[JürgenB]

Hallo Kalk,

<table is="sorttable>

Wirklich „sorttable“ statt „sortable“?

warum nicht? Evtl. auch sort-table.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Wirklich „sorttable“ statt „sortable“?

warum nicht? Evtl. auch sort-table.

Oder sort’able.

Kwakoni Yiquan

[Rolf B]

Hallo Jürgen,

ja, hat keinen Effekt.

Gerade mal in den Developer Tools geschaut: die tr und td Elemente werden gar nicht erst im DOM angelegt, sondern ignoriert. Im DOM steht nur der Textinhalt.

Was aber „funktioniert“, ist:

<style>
foo-table { display: table; }
foo-tr { display: table-row; }
foo-td { display: table-cell; }
</style>
...
<foo-table>
  <foo-tr>
    <foo-td>Eins</foo-td>
    <foo-td>Zwei</foo-td>
    <foo-td>Drölf</foo-td>
  </foo-tr>
</foo-table>

Aber ob das GUT ist?

Ich möchte einen Tabellensortierer, der die Tabelle z.Zt. über <table class="sortierbar"> erkennt, auf sort-table umstellen

Was bedeutet: Du müsstest hinter <table class="sortierbar"> ein <sort-table> Element einfügen und den Inhalt von <table> ins Shadow-DOM des <sort-table> hineinzerren. Oder? Das Table-Element an Ort und Stelle durch sort-table zu ersetzen dürfte nicht möglich sein.

Für den Nutzer (also Webdesigner (m/w/d)) bedeutet das: er muss sich dessen bewusst sein. Er muss sein CSS darauf auslegen, dass die von ihm generierte Tabelle auf einmal verschwindet und in einem anderen Element steckt - dazu noch im Shadow-DOM dieses Elements, was man nur über ::part(...) formatieren kann und was voraussetzt, dass diese Parts als Slots exportiert werden.

Das mag irgendwie funktionieren, aber ist es für Hein B. Normaldesigner nachvollziehbar?

Vielleicht bin ich ja auch im Thema zu wenig drin, um den Nutzen des Ganzen zu erkennen, und sollte besser still sein. Matthias und Du habt schon fleißig darüber hirngestürmt während ich die entsprechenden Stammtische geschwänzt habe und ich quatsche jetzt wie Hein blöd von der Seite rein…

Rolf

[JürgenB]

Hallo Rolf,

Aber ob das GUT ist?

ich glaube nicht.

Ich möchte einen Tabellensortierer, der die Tabelle z.Zt. über <table class="sortierbar"> erkennt, auf sort-table umstellen

Für den Nutzer (also Webdesigner (m/w/d)) bedeutet das: er muss sich dessen bewusst sein. ... Das mag irgendwie funktionieren, aber ist es für Hein B. Normaldesigner nachvollziehbar?

Nein, das ist leider keine Lösung. Das Custom Element soll es ja einfacher machen.

Vielleicht bin ich ja auch im Thema zu wenig drin, um den Nutzen des Ganzen zu erkennen, und sollte besser still sein. Matthias und Du habt schon fleißig darüber hirngestürmt während ich die entsprechenden Stammtische geschwänzt habe und ich quatsche jetzt wie Hein blöd von der Seite rein…

Keine Sorge, dazu ist die Idee noch zu frisch.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Rolf B

Was aber „funktioniert“, ist:

<style>
foo-table { display: table; }
foo-tr { display: table-row; }
foo-td { display: table-cell; }
</style>
...
<foo-table>
  <foo-tr>
    <foo-td>Eins</foo-td>
    <foo-td>Zwei</foo-td>
    <foo-td>Drölf</foo-td>
  </foo-tr>
</foo-table>

Damit das funktioniert (ohne Gänsefüßchen), müssten zumindest noch die fehlenden role-Attibute ergänzt werden. Mit den richtigen Werten, versteht sich.

Aber ob das GUT ist?

Wohl nicht.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@JürgenB

Wenn ich sie in ein x-table legen, verlieren sie ihre Tabelleneigenschaften, bzw. sie werden garnicht im DOM angelegt.

Eben. x-table ist keine Tabelle. Und würde einiges an Aufwand erfordern, es zu einer zu machen. Nicht zu vergessen: role="table". Nicht machen!

Entweder du verwendest das HTML-Element table für die Web component:
<table is="x-table">, was aber in Safari nicht funktioniert.

Oder dein custom element ist ein Container, der die Tabelle enthält:

<x-table>
  <table>
    ⋮
  </table>
</x-table>

(wobei der Container nicht x-table benannt sein sollte).

Kwakoni Yiquan

[JürgenB]

Hallo Gunnar,

Oder dein custom element ist ein Container, der die Tabelle enthält:

<x-table>
  <table>
    ⋮
  </table>
</x-table>

an so etwas habe ich auch schon gedacht, ist aber nicht mein Favorit. Da bleibe ich lieber bei <table class="sortierbar>. Und <table is="sortierbar"> geht ja auch, wenn auch nur als Selektor und ohne Web component.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Oder dein custom element ist ein Container, der die Tabelle enthält:

<x-table>
  <table>
    ⋮
  </table>
</x-table>

an so etwas habe ich auch schon gedacht, ist aber nicht mein Favorit.

Meiner wär’s. Ich bin da auch gerade am Basteln: ☞ sortable table (custom element) (Das Ding sortiert noch nicht, sondern schreibt nur in die Konsole.)

Da bleibe ich lieber bei <table class="sortierbar>.

Dann musst du aber wohl mit einer Schleife über alle document.querySelectorAll('table.sortierbar') das JavaScript an jede sortierbare Tabelle hängen. Das geht mit Web component eleganter.

Und <table is="sortierbar"> geht ja auch, wenn auch nur als Selektor und ohne Web component.

Es ginge auch als Web component, wenn sich Apple nicht beharrlich weigern würde, das in Safari zu implementieren. ☞ extend table element

Kwakoni Yiquan

[JürgenB]

Hallo Gunnar,

… Das geht mit Web component eleganter.

ja, das Script ist eleganter, aber dafür das HTML nicht. Du baust da ein Custom Element ein, um eine Custom Element zu haben.

Gruß
Jürgen

[JürgenB]

Hallo Gunner,

Dann musst du aber wohl mit einer Schleife über alle document.querySelectorAll('table.sortierbar') das JavaScript an jede sortierbare Tabelle hängen. Das geht mit Web component eleganter.

der Tabellensortierer im Wiki hat 170 Zeilen. Davon entfallen vier Zeilen statt einer auf das Suchen und Initialisieren der zu sortierenden Tabellen.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

sorry, wenn ich mir den noch nie angeguckt habe, aber soll dieser Code durch deinen Custom-Element Sortierer ersetzt werden oder soll diese Fassung noch länger stehen bleiben?

Weil - Code-Style ist natürlich immer eine persönliche Sache, aber bei dem Stil des Tabellensortierers hätte ich wirklich Gesprächsbedarf.

Rolf

[JürgenB]

Hallo Rolf,

sorry, wenn ich mir den noch nie angeguckt habe, aber soll dieser Code durch deinen Custom-Element Sortierer ersetzt werden oder soll diese Fassung noch länger stehen bleiben?

wenn das mit dem Custom-Element nicht klappen sollte, wovon ich im Moment ausgehe, bleibt der.

Weil - Code-Style ist natürlich immer eine persönliche Sache, aber bei dem Stil des Tabellensortierers hätte ich wirklich Gesprächsbedarf.

leg los, ich weis, dass ich meinen eigenen Stil habe.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

dazu müssen wir mal discorden, das Forum ist dafür ein schlechter Platz. Aber erst übernächste Woche, bis dahin bin ich familiär geblockt.

Rolf

[Rolf B]

Hallo Gunnar,

Oder dein custom element ist ein Container, der die Tabelle enthält:

Bedeutet das nicht, dass x-table einen Slot enthalten muss, in den die Table dann vom DOM Parser eingesetzt wird, woraufhin sie im Shadow DOM landet?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Gunnar,

Oder dein custom element ist ein Container, der die Tabelle enthält:

Bedeutet das nicht, dass x-table einen Slot enthalten muss, in den die Table dann vom DOM Parser eingesetzt wird, woraufhin sie im Shadow DOM landet?

Nö. Man kann bei Web-Components Sachen ins Shadow-DOM tun, muss es aber nicht.

Kwakoni Yiquan

[JürgenB]

Hallo,

Nö. Man kann bei Web-Components Sachen ins Shadow-DOM tun, muss es aber nicht.

Custom Elemente können leer sein. Dann wird Aussehen und Funktion bei der Definition des Elements angelegt. Siehe z.B. den self-slider.

Hier wollte ich ein Element mit Inhalt (eine Tabelle) nur um eine Funktion (den Sortierer) erweitern, also von <table class="sortierbar"> nach <sort-table> gehen. Aber so wie es aussieht, scheitere ich daran, dass die Tabellenelemente außerhalb einer Tabelle keine Bedeutung haben. Das wäre ja noch nicht mal so schlimm, aber sie landen ja garnicht im DOM und können so auch nicht (per innerHTML) ins Schattendom kopiert werden.

Ich könnte möglicherweise die Seite per fetch laden und dann mit Stringmethoden die Tabelle suchen, ins Schattendom kopieren und markieren, damit sie nicht nochmal behandelt wird. Aber erstens sehe ich da nicht alle Nebenwirkungen, und zweitens will ich nicht auf Biegen und Brechen ein Custom Element haben. Wenn es eine Alternative zu innerHTML gibt, die den Quelltext nimmt, wäre das eine Lösung, sonst lasse ich das lieber,

Gruß
Jürgen