Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Components should create a `display:block` style by default

See original GitHub issue

Let’s say I create a new component in Angular2 and I attempt to style it:

// hello_world_cmp.ts
@Component({
   selector: 'hello-world',
   styleUrls: ['hello-world.css']
   template: 'hello world!'
})
class HelloWorldCmp { }

// hello_world.css
:host { background: red; }

The styling fails to be applied for the sole reason that browsers have no clue what the <hello-world></hello-world> HTML element is. This is expected, but it’s tricky to debug for those of whom are new to Angular and to web components. This is also the case with predefined Angular components (like <router-outlet></router-outlet>).

Solution

I think it’s best if Angular keeps track of each of the components created in an application and builds a CSS selector which is placed at the HEAD of the index.html file within a style tag.

<head>
<style>
router-outlet, hello-world { display:block; }
<style>
</head>

Since the CSS selectors are tag selectors this means that they have the lowest specificity and the fact that the styles are placed at the top of the index.html document this then allows for ui-libraries and user-defined styles to easily override the styles without having to use a heavier selector (e.g. is a .class selector is used to match all components then a user style like hello-world would lose to that in the specificity battle).

We should also have a flag to disable this.

Issue Analytics

State:
Created 8 years ago
Reactions:27
Comments:20 (8 by maintainers)

Top GitHub Comments

27reactions

matskocommented, Dec 16, 2015

@tbosch we can’t use element.style.display because that’s an inline style and inline styles have the highest specificity. So something like this would always require !important.

/* from the component itself */
:host { display:block!important; }

/* or from a parent component */
hello-world { display:block!important; }

@tbosch and @kasperpeulen The reason why we use display:block here is because almost all components that contain inner element data are block by default in HTML (think <div>, <p>). Even HTML5 elements like <section>, <footer>, <aside> are all block level (here’s proof: http://plnkr.co/edit/aaIVUpEhqrVx6NltvFya?p=preview). That being said, there’s a higher chance that the user expects this as the default and then overrides to support something like flex or inline.

This isn’t so much about the component author vs the template author, it’s more about allowing the user to skip an annoying step for every component created.

10reactions

nawlbergscommented, Apr 4, 2017

I would prefer that angular components just received a css class when compiled. for example: <my-component></my-component> would become: <my-component class="ng-component"></my-component>

Thus, the author could do a global style to default components to whatever they want:

<style>
.ng-component{  display:block; }  // all my components will be block by default.
....
my-inline-component.ng-component{ display:inline-block;  } // this one will be in-line.. etc...
</style>