未应用 AngularJS 1.5 组件样式

Question

Several times I noticed that styles added for AngularJS 1.5 components aren't really applied and now I encountered this again and can't google the reason why it happens so. The situation: I've got view home and component bt-table inside it.

Simplified template:

<section id="home">
    <bt-table data="hc.tableData" options="hc.tableOptions"></bt-table>
</section>

In styles (sass) for home I write the following selector:

#home
    bt-table
            margin: 0 0 30px 0

Then I see it's not applied, go to devtools and see that styles are actually parsed by browser:

Also intresting: when I hover component in elements, I see this:

Notice how element isn't highlighted with blue as normal even though it has non-zero size?

So, why can it work so? Has it something to do with AngularJS template compilation process (it's my guess) or there are another reasons?

UPD: if I set border: 10px solid red for element, that gets rendered:

UPD: the markup inside bt-table looks like this:

<section id="table">
    <div class="panel panel-default">
        <div class="panel-heading">Table</div>
        <table st-table="tc.data.data" class="table table-striped">

            <!-- HEADERS, SORTING AND SEARCHBARS -->
            <thead>
            <tr>
                <th ng-repeat="header in tc.data.headers" st-sort="{{header.sortsearch}}" ng-bind="header.title"></th>
            </tr>
            <tr ng-if="tc.options.search === 'every'">
                <th ng-repeat="header in tc.data.headers">
                    <input st-search="{{header.sortsearch}}" placeholder="search for {{header.title.toLowerCase()}}" class="input-sm form-control" type="search"/>
                </th>
            </tr>
            <tr ng-if="tc.options.search === 'all'">
                <th>
                    <input st-search placeholder="search in all columns" class="input-sm form-control" type="search"/>
                </th>
            </tr>
            </thead>

            <!-- CONTENT -->
            <tbody>
            <tr ng-repeat="row in tc.data.data">
                <td ng-repeat="column in row" ng-bind="column"></td>
            </tr>
            </tbody>

            <!-- PAGINATION -->
            <tfoot ng-if="tc.options.pagination">
            <tr ng-if="tc.tdata.options.pagination.type === 'buttons'">
                <td colspan="5" class="text-right">
                    <div st-pagination="" st-items-by-page="tc.tdata.options.pagination.itemsByPage" class="no-margin"></div>
                </td>
            </tr>
            <tr ng-if="tc.options.pagination.type === 'input'">
                <td colspan="5" class="text-right">
                    <div st-pagination="" st-items-by-page="tc.options.pagination.itemsByPage" st-template="components/l-table/custom-pagination.custom.html" class="no-margin"></div>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</section>

Answer 1

It's probably because you are targeting a custom element and chrome is setting it to display:inline . Two options:

---

Option 1 : Add a style of "block".

bt-table{
   display: block;
}

---

Option 2 use replace(which is what I would do). You would set replace:true on the directive and then targeting the first child of section which isn't a custom element and will display to block :

<section id="table">

Other suggestions pick something else besides id=table . id s are supposed to be unique on the page. I'd recommend adding a class selector to target:

eg

<section class="btn-table">

Then update your styles to:

#home .bt-table{
    margin: 0 0 30px 0
}