How to make grid enforce size constraints on elements inside shadow dom?

49
May 23, 2019, at 08:10 AM

Best example I could make:

var grid = document.querySelector("#grid"); 
 
var shadow_container = document.querySelector("#shadow_container"); 
var shadow_root = shadow_container.attachShadow({mode: 'open'}); 
 
var shadow_inner = document.createElement("div"); 
shadow_root.appendChild(shadow_inner); 
shadow_inner.style.overflow = "scroll"; 
 
var big_thing = document.createElement("div"); 
shadow_inner.appendChild(big_thing); 
big_thing.style = "background-color:rgba(255,0,0,0.5); width:200px; height:300px;"
.grid { 
  width:100px; 
  height:200px; 
  border:1px solid black; 
   
  display:grid; 
  grid-template-columns:auto; 
  grid-template-rows:auto; 
}
<div class="grid"> 
  <div id="shadow_container"></div> 
<div>

So basically,

  1. grid contains an element that has a shadow dom
  2. the shadow dom contains an element that has overflow:scroll
  3. big thing still overflows because as far as shadow dom is concerned, there are no size restraints on it

Weird thing is, if I set a pixel value on column size, it actually restricts the shadow dom to that width but same does not work for height. Either way, I don't want pixel values but auto as its supposed to fill the remaining available space.

READ ALSO
Two Colum website with opposite scrolling effect [on hold]

Two Colum website with opposite scrolling effect [on hold]

How does one go about creating a website with two columns with one column moving up and the other one moving down at the same time? Example: wwwritevac

56
How do I configure to print for a thermal paper printer with react-to-print?

How do I configure to print for a thermal paper printer with react-to-print?

I'm working in a React page, and I'm using react-to-print for printingBut now I need to print in a thermal paper printer

25
the value of the property is null or undefined, not a Function object

the value of the property is null or undefined, not a Function object

I have code which functions perfectly fine in Chrome and Firefox but IE 11 (where the code MUST function) throws the following error:

28
How to access global data in material-ui MenuItem onClick function

How to access global data in material-ui MenuItem onClick function

I have a list of items and each of them has a menu (material-ui Menu) with option (MenuItem) to edit and delete;

24