CSS Selector on custom element

Question!

Is there any contraindications on stylizing Angular2 custom element directly and selecting them with CSS selector ?

Example :

// HTML
<My-Page>
    <header></header>
    <main></main>
    <My-Footer class="sticky-footer"></My-Footer>
</My-Page>

// CSS 
My-Page {
    background-color: grey;
}

header {
    ...
}

.sticky-footer {
    position: absolute;
}

Good or bad practice ?



Answers

You should use piercing CSS combinators >>>, /deep/ and ::shadow

styles: [
    `
     :host { background-color: grey; }

     :host >>> header{
       background:yellow;
     }

     :host >>> My-Footer{  
       position: absolute;
     }         
    `
],
template:
`
<My-Page>  //<----no need as this becomes your :host

    <header></header>
    <main></main>
    <My-Footer class="sticky-footer"></My-Footer>

</My-Page> //<----no need
`
By : micronyks


While this is perfectly valid it breaks modularity. A component can style its own root-element:

my-page.component.css

:host{
  background-color: grey;
}

header {
    ...
}

.sticky-footer {
    position: absolute;
}

This will achieve the same thing and contains CSS that's vital to your MyPageComponent in the component.

By : j2L4e


If you have to pass multiple parameter please use class object:

public class PortalClass
{
    public ApplicationModel applicationModel { get; set; }
    public string user_id { get; set; }
    public string id { get; set; }
    public object pageCollection { get; set; }
}

public object GetApplication(PortalClass data)
{
    JsonSerializerSettings settings = new JsonSerializerSettings { TypeNameHandling = TypeNameHandling.All, PreserveReferencesHandling = PreserveReferencesHandling.None };
    var myObject=JsonConvert.DeserializeObject<PageCollection>(data.pageCollection.ToString(), settings)
    return null;
}

Client Side:

var data = {
    user_id: userId,
    id: id
};

http.post(url, data).then(
   function (response) {

}, function (err) {
   callback.reject(err);
});


This video can help you solving your question :)
By: admin