'subgrid' attribute invalid problem feedback
Develop component <my-button> based on web component, enable ShadowDom, and apply <slot> slot to insert sub-component <my-button-item> that also enables ShadowDom, and set grid layout of component element <my-button>. Invalid subgrid property set for <my-button-item> element (By the way,the subgrid property in the <my-button> component is valid)
All Replies (2)
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Button Component</title> <script> class MyButton extends HTMLElement { constructor() { super(); // Create a shadow root const shadow = this.attachShadow({ mode: 'open' }); // Create a container for the button items const container = document.createElement('div'); container.classList.add('button-container'); // Apply a grid layout to the container container.style.display = 'grid'; container.style.gridTemplateColumns = 'repeat(auto-fill, minmax(100px, 1fr))'; container.style.gap = '10px'; // Append the container to the shadow root shadow.appendChild(container); // Use a slot to allow insertion of <my-button-item> components container.innerHTML = ` <slot></slot> `; } } customElements.define('my-button', MyButton); </script> <script> class MyButtonItem extends HTMLElement { constructor() { super(); // Create a shadow root const shadow = this.attachShadow({ mode: 'open' }); // Create a button item const buttonItem = document.createElement('div'); buttonItem.classList.add('button-item'); // Apply a grid layout to the button item buttonItem.style.display = 'grid'; buttonItem.style.gridTemplateColumns = '1fr 1fr'; // Append the button item to the shadow root shadow.appendChild(buttonItem); // Use a slot to allow insertion of content into the button item buttonItem.innerHTML = ` <slot></slot> `; } } customElements.define('my-button-item', MyButtonItem); </script> <my-button> <my-button-item>Item 1</my-button-item> <my-button-item>Item 2</my-button-item> <my-button-item>Item 3</my-button-item> </my-button>
"buttonItem.style.gridTemplateRows: subgrid; "
The subgrid property is invalid.The fundamental problem I raised was that the subgrid attribute was invalid
