Discuss Web Components integration

I understand that as an early adopter using technology like Web Components, I cannot expect the existing tooling I’m accustomed to, to “just work”. Although in the case of Semantic UI, I’m worried that its current design decisions do not align with the future of isolation and custom elements in the web via Web Components.

Example: You are building a data grid and want to separate the table from the row via components. So you have the following two components:

• TableComponent
• TableRowComponent

Once rendered the DOM Tree looks something like:

~ TableComponent ~
  -> Shadow Root
    -> slot (table)
  -> table
      -> thead
      -> tbody
        -> ~ TableRowComponent (Subclasses TR) ~
          -> Shadow Root
            -> td
            -> td

The problem may not be immediately obvious, but as styles do not cross the shadow boundary and the way that Semantic UI forfeits explicit class names for element names, means that it’s pretty much impossible to get this to work:

/* .ui.celled.table is styled perfectly, but there's no way to cascade into the td */
.ui.celled.table tr td, .ui.celled.table tr th {
    border-left: 1px solid rgba(34,36,38,.1);
}

How can we get these styles into the Shadow Root?

• CSS Variables? (Not really, they won’t substitute full blocks, could help with theming)
• Flat class names? (Good solution, but 3671 didn’t fair well…)
• JavaScript? (Really hope not)

Does the project/community have thoughts on this fundamental design problem?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[tbranyen]

Looks like is didn’t make it to the v1 specification which is very frustrating to learn. So the above code doesn’t work. The best you can do right now is:

<table>
  <some-custom-row>
    <td>
    <td>
  </some-custom-row>
</table>

<style>
some-custom-row {
  display: table-row;
}
</style>

This displays correctly and will be styled nicely by Semantic UI. Issues will occur once you decide to make <some-custom-row> re-usable and stateful using Web Components.

I’m going to investigate generating Web Components for Semantic UI. Would be nice to have a UI Toolkit for diffHTML (the tool I’m working on) and this way I could simply extend from SemanticUITableRow like this:

import { html } from 'diffhtml';
import { WebComponent, PropTypes } from 'diffhtml-components';
import { SemanticUITableRow } from 'diffhtml-semantic-ui';

class DevtoolsTransactionRow extends SemanticUITableRow {
  static propTypes = {
    index: PropTypes.number,
    transaction: PropTypes.shape({
      patches: PropTypes.shape({
        TREE_OPS: PropTypes.array,
      }),
    }),
  }

  render() {
    const { index, transaction } = this.props;
    const { patches } = transaction;
    const { TREE_OPS} = patches;
    const stats = { insert: 0, replace: 0, remove: 0 };

    TREE_OPS.forEach(patchset => {
      if (patchset.INSERT_BEFORE) {
        stats.insert += patchset.INSERT_BEFORE.length;
      }

      if (patchset.REPLACE_CHILD) {
        stats.replace += patchset.REPLACE_CHILD.length;
      }

      if (patchset.REMOVE_CHILD) {
        stats.remove += patchset.REMOVE_CHILD.length;
      }

    });

    return html`
      <td>${String(index + 1)}</td>
      <td class="center aligned"><strong>${stats.insert}</strong></td>
      <td class="center aligned"><strong>${stats.replace}</strong></td>
      <td class="center aligned"><strong>${stats.remove}</strong></td>
    `;
  }
}

customElements.define('devtools-transaction-row', DevtoolsTransactionRow);

This would be automatically styled, next pass could be maybe making them stateful w/ the JS.