Badge color not working inside active Tab title slot

[arrancardnell]

Version & browser

uiv 1.2.1
Firefox 84.0.2 (64-bit)

Which component

Tab

Steps to reproduce the problem

Using a Tab with html-title and a backstring HTML string as follows:

    <Tab>
      <template slot="title">
        <i class="fa fa-fw fa-filter"></i> Filters
        <span class="badge">5</span>
      </template>
    </Tab>

Expected behavior

Badge inside an active tab should have a white background with tab color text as detailed in the docs here

Actual behavior

Badge still has grey background even with active tab.

This seems to be because the content of the tab link is wrapped in a div (vue-portal-target) element.

Moving the contents out of the div fixes the issue.

Issue seems related to a previous one: 276

[wxsms]

this div can only be removed while it has one single child node. this might be a limitation of vue 2. Extend bootstrap css to make the child selector not so strict to direct children might be a good work accound for now. Do you have any suggeustions?

[wxsms]

Nevermind. already found a solution.