Alien attributes are not passed to the checkbox element in b-form-checkbox-group

You cannot pass alien attributes to the checkbox element within a b-form-checkbox-group component. The following component definition applies the ‘class’ attribute to the ‘group’ div and not the underlying checkbox inputs. This may or may or may not be by design but there is no way of passing attributes to the input elements.

To reproduce the problem, define a checkbox group thus: <b-form-checkbox-group class="success" v-model="selectedItems" :options="items"></b-form-checkbox-group>

I would have expected any alien attributes, class in this instance, to be applied to the checkbox elements. These are, after all, the elements that are visible and have a user impact.

Versions

Libraries:

• BootstrapVue: 2.#.#
• Bootstrap: 4.#.#
• Vue: 2.#.#

[ianef]

OK, I give up.

[tmorehouse]

That is what scoped styles and deep selectors are for. I still can’t understand why people are so scared of writing deep selector styles, or an extra line (or two) of HTML/Vue markup.

Re button-variant… it is a special use case that translates a theme color names to a class… i.e. danger is translated to class btn-danger (and in some components there is extra logic to determine the class prefix based on other conditions). It is not the same as a prop button-class