1

I use webcomponents to create a library of components which should be reusable by my team.

I can add style to my components to be responsive and adapt themselves to the viewport.

My problem now is that in some cases, a component can be placed either as an aside of the app or in the main part. So for the same viewport, the component can have a small width container or a full width depending where it's placed.

Is there a way to make "media queries" relative to the parent ?

Note: this question is not only for the size of the element which can be set easily with em or % units, but it can be for colors or display type.

ajm
  • 19,795
  • 3
  • 32
  • 37
ylerjen
  • 4,109
  • 2
  • 25
  • 43

1 Answers1

0

Can you target the styling of your components based on the class of their parent, e.g. 

.aside .webcomponent{  
 /* styling of colors or display type for web component used as an aside here */  
}  

.main .webcomponent{  
 /* styling of colors or display type for web component used as in the main area  here */  
}

Update:

As my WebComponent is used by someone else, I can't be sure that he will name the parent element .aside, .main,...

A couple of possibilities that might work for you.

Your webcomponent comes with some built in layouts and you let the end user control the layout of the webcomponent by adding a class or using data attributes with their instance. e.g.

<webcomponent class="aside" data-colour="pink"> ... </webcomponent>

The second possibility is that you include javascript in your webcomponent that looks at the width of the parent element and then manipulates classes or values as required. e.g. 

$(document).ready(function(){
    $("webcomponent").parent().css({"color": "pink"});
});

Hope this helps!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • hello, thanks for your reply, but this answer expect that I control the environment where the component is added, but this is not the case. As my WebComponent is used by someone else, I can't be sure that he will name the parent element .aside, .main,... And I don't want to force a structure for the host. It should re-style automatically according to the size not a selector. – ylerjen Sep 15 '16 at 06:19