Giters

taiga-family / ng-polymorpheus

Polymorpheus is a tiny library for polymorphic templates in Angular.

Home Page:https://stackblitz.com/edit/polymorpheus-demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Clarification on default outlet styling and how to override without !important

JoepKockelkorn opened this issue · comments

commented

Hi,

First of all, I love this idea. It makes customisation so much more future-proof. Although the idea is a bit hard to grasp at first, it's really powerful.

I have a question regarding styling. Why is the default styling of the outlet :host { display: block; }? I want my outlet to be inline. I now have to override this with !important because I'm using global styling to style this component. Why can't it just be the default of unset?

Here is my example, note the !important I have to apply. FYI: I want my styling to be global so it can be customised using SASS variables (this component can be part of a component lib distributed via npm).

Hope to hear from you!

Kind regards,
Joep Kockelkorn

commented

Hi @JoepKockelkorn. That sounds reasonable. At first it was always <polymorpheus-outlet> and it was always was block where we used it. But since then we added attribute selector so it can be used like this: <header polymorpheus-outlet>. And in this case we should preserve original display for sure. However we approach this, it would be a breaking change so we need to think about it a bit more, thank you for bringing this up!

commented

Thanks for the quick reply. I could maybe override it in the component styles, but the point really is that I don't want to. I want the consumer of the component lib to be in full control of the styling, because I've experienced this 'how to override component styles horror' when using other component libs.

Yeah, I understand that it would be breaking so I don't expect this to be in soon. But count me as a advocate of your package once it lands 😃

commented

Right now I'm thinking of two paths:

  1. Drop styling and custom component selector altogether. You want basic block outlet — you can use div polymorpheus-outlet, you want an inline one — you can write span polymorpheus-outlet.
  2. Smoothen out breaking change by changing style to :host:not([polymorpheus-outlet]). This way it will only affect attribute selector which most likely already has display: block or any custom styling applied where it is used. This might even qualify as non-breaking change, what do you think, @MarsiBarsi?
commented

You could also do the first and combine it with a schematic. The schematic then adds the block styling to the component where the polymorpheus-outlet directive or component is used. Nothing then breaks when upgrading through the cli.

commented

For the first case schematic should replace all usages of <polymorpheus-outlet tag selector with <div polymorpheus-outlet rather. And closing </polymorpheus-outlet> with </div>. Might save a few bytes for the folks :)

commented

Went with number 1 and removed component selector along with default style. Also bumped Angular to v.9 and released it as 3.0.0