title: What is the difference between widget_attributes and widget_container_attributes?
body: <p>Ok, bad question since <em>semantically</em> I think I can gather the difference by the block names themselves. My real question is how can I control which attributes appear a container and an element when <code>widget_attributes</code> and <code>widget_containter_attributes</code> are required on a given element.</p>
  
  <p>Consider the following:</p>
  
  <pre><code>&lt;div class="ui-select foo bar baz"&gt;
      &lt;select id="abc_hello_worldtype_name" name="abc_hello_worldtype[name]" class="thud grunt"&gt;
          ...
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Main things I'm going after are having to set class names on both the <code>div</code> and the <code>select</code>. This is required for both style reasons as well as behavior-related requirements.</p>
  
  <p>The main thing that is confusing me is that both the original widget_attributes and widget_container_attributes both use the <code>attr</code> variable passed in. Are these not intended to be used together?</p>
  
  <hr>
  
  <p>I found myself doing something like the following today; just making my own blocks copied from the originals and adding to the conditionals. This all seems way too complicated. I know I'm doing it wrong. </p>
  
  <pre><code>{% block choice_widget_collapsed %}
  {% spaceless %}
      {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ui-select')|trim}) %}
      &lt;div {{ block('ui_select_container_attributes') }}&gt;
          &lt;select {{ block('ui_select_widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}&gt;
              {% if empty_value is not none %}
                  &lt;option value=""{% if required %} disabled="disabled"{% if value is empty %} selected="selected"{% endif %}{% endif %}&gt;{{ empty_value|trans({}, translation_domain) }}&lt;/option&gt;
              {% endif %}
              {% if preferred_choices|length &gt; 0 %}
                  {% set options = preferred_choices %}
                  {{ block('choice_widget_options') }}
                  {% if choices|length &gt; 0 and separator is not none %}
                      &lt;option disabled="disabled"&gt;{{ separator }}&lt;/option&gt;
                  {% endif %}
              {% endif %}
              {% set options = choices %}
              {{ block('choice_widget_options') }}
          &lt;/select&gt;
      &lt;/div&gt;
  {% endspaceless %}
  {% endblock choice_widget_collapsed %}
  </code></pre>
  
  <p>Notice the <code>ui_*</code> block references on the <code>div</code> and the <code>select</code>. Those blocks look like:</p>
  
  <pre><code>{% block ui_select_widget_attributes %}
  {% spaceless %}
      id="{{ id }}" name="{{ full_name }}"{% if read_only %} readonly="readonly"{% endif %}{% if disabled %} disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{ max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %}
      {% for attrname, attrvalue in attr %}{% if attrname in ['placeholder', 'title'] %}{{ attrname }}="{{ attrvalue|trans({}, translation_domain) }}" {% elseif attrname == 'class' %} class="foopa {{ attrvalue|replace({'ui-select':''}) }}" {% else %}{{ attrname }}="{{ attrvalue }}" {% endif %}
      {% endfor %}
  {% endspaceless %}
  {% endblock ui_select_widget_attributes %}
  
  {% block ui_select_container_attributes %}
  {% spaceless %}
      {% if id is not empty %}id="{{ id }}" {% endif %}
      {% for attrname, attrvalue in attr %}{{ attrname }}="{{ attrvalue }}" {% endfor %}
  {% endspaceless %}
  {% endblock ui_select_container_attributes %}
  </code></pre>