How to initialize html attributes only when instantiating a web component

Question

Suppose you have a custom component container. This component will look at any html elements inside it and make desicions based on custom html attributes of those elements. For example, suppose there is a proportion attribute that could be used as follows:

<x-container>
  <div proportion="0.2">
  ...
  </div>
  <div proportion="0.5">
  ...
  </div>
  <div proportion="0.3">
  ...
  </div>
</x-container>

Forgetting dart for a second is this a reasonable thing to do with html attributes or is it an abuse? (Note: I am learning Dart and Web UI as my first attempt at web development - so this may be a bad idea).

If it is reasonable, I would like to nest containers:

<x-container>
  <x-container proportion="0.3">
  ...
  </x-container>
  <x-container proportion="0.3">
  ...
  </x-container>
  <div proportion="0.4">
  ...
  </div>
<x-container>

In general Container components themselves do not have or need proportion member variables, only their contained html elements may have proportion html attributes. But since a container can be a contained element I want it to be able to have such an html attribute. How can I set an html attribute in the instantiation of a component without it trying to call a dart method ("proportion=") on a member variable that does not and should not exist?

From the answer for How to pass a constant or literal data via an attribute while instantiating dart web component? it looks like the suggestion is attribute=value, but this attempts to set a member variable, which will not exist.

Answer 1

It turns out that there is a bug that prevents html attributes from being set.

Going forward:

We will be able to set html attributes without binding them when the fix is released. Additionally there will be a new requirement to specify which instantiation attributes are to be bound. Any attributes specified in html instantiation but not specified in the component element definition's attributes=... will be passed through as html attributes of the component. Additionally, in general, when passing data from html instantiation through to html attributes (by not adding them to attributes=...) it is best practice to name them data-some-unique-prefix-* and then they can be accessed via component's dataset map.

The discussion: https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/KYF6pbVk8J0

These features are actively being developed so count on changes.

Answer 2

If you are able to translate your requirements to css instead of a proportion attribute, you may be able to accomplish what you want to using an approach like the following.

In my components, I pass in a view object to the component, and the view object has style attribute, which is dynamically generated based on the values assigned to the view object;

In the partial sample below, in my component dart code I am calculating the style and class attributes using the view object that is passed at runtime.

  CardView view;
  String get cardClass => 'piece ${view.type} card classic clickable';
  Map get cardStyle => view.styles;  

And in my html code I refer to those getters as shown;

<element name="x-playing-card" constructor="PlayingCardComponent" extends="div">
  <template>
      <div class="{{cardClass}}"  on-click="select()"
        style="{{cardStyle}}">
      </div> 
  </template>
  <script type="application/dart" src="xplayingcard.dart"></script>
</element>

In a similar way, I think you can accomplish the same as the proportion attribute does, but using css.