1

I am building a component which uses ng-content and I have found that I cannot use nested scss or the StylesUrl when I use the :host >>>

For instance :

:host >>> .toolbar-brand{
  color: red;
  font-weight: 500;
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
}

:host >>> .nav-bar-menu-options.hlink, .nav-bar-menu-options.drop-down{
  font-weight: 500;
  text-decoration: none;
  position: relative;
  top: -6px;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0 10px 0 10px;

  &.has-divider {
    border-right: 1px solid #b0bec5;
  }

}

:host >>> .nav-bar-menu-options.hlink:hover {
  text-decoration: underline;
  cursor: pointer;
}
:host >>> .fill-remaining-space {
  flex: 1 1 auto;
}
:host >>> .search-link {
  cursor: pointer;
}

:host >>>.search-input-container{
  position:relative;

  .search-link{
    position: absolute;
    top: 3px;
    left:30px;
  }
}

:host >>> .my-input{
  border-left: 1px solid #b0bec5;
  padding: 11px 75px 11px 60px;
  background: transparent;
  outline:none;
  margin-left: 20px;
  width: 100%;
  &::placeholder {

  }
}

Can anyone tell me why my .has-divider & my nested .search-link doesn't work and also why when I place the contents inside a .scss file and use styleUrls it doesn't work with the :host. Is this expected or a possibly Bug

I would Ideally like to be able to still use the nested scss from and external scss file

jonnie
  • 12,260
  • 16
  • 54
  • 91

1 Answers1

2

>>> is known to cause issues with SASS. Use instead /deep/

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • so That solved the issue with reading from the file rather than in line but didn't seem to be able to use the nested styles still... – jonnie Nov 07 '16 at 19:27
  • 1
    Actually it seems to work as expected if I just wrap inside `:host /deep/ { ... }` – jonnie Nov 07 '16 at 19:38