为自定义HTML元素创建height和width属性

Question

I'm working with creating custom html tags/elements that will then be dynamically added via JavaScript/jQuery. My end goal is to create a custom element like <xt-vertical-layout height="30px" width="50px"></xt-vertical-layout> where height and width will set the rendered size. I have figured out how to create the custom elements and have custom attributes that can hold data, but I cannot seem to find a way to modify the rendering. To be clear, I am not having an issue with CSS height and width not working. My issue is that I could potentially have hundreds of the elements all with varying sizes that are unknown untill being injected into the DOM well after the document has loaded.

I had at first looked into CSS with attribute selectors but it does not seem to be able to carry the value of the attribute down into the CSS rule. Similarly I had looked into the attr() function of CSS but it seems this only works on content . I found a bit of documentation on this function being allowed for all attributes in CSS4 though I then read something saying CSS4 will not be released and instead CSS will begin to be updated per module and so it seems this has not made it into the current standard.

Any light that could be shed on this subject would be greatly appreciated. I feel like there is some way to do this but am not too sure how. To be clear though, I'm not wanting something like parsing through the markup with JavaScript/jQuery and modifying that element with $().css() or something like that, as this then modifies the actual markup. My desire is to have the markup unchanged and the attributes modify the rendering, similar to how the <img/> tag works.

EDIT: I do not mind doing this with JS/jQuery in the constructor for the custom element if it can be done there without modifying an inline style attribute, leaving the markup unchanged.

Answer 1

You would normally handle this in your CustomElement's class connectedCallback , where you will be able to access the node as this , and its DOM methods like getAttribute() if it inherits from HTMLElement.

 class VerticalLayout extends HTMLElement { constructor() { super(); } connectedCallback() { this.style.width = this.getAttribute('width'); this.style.height = this.getAttribute('height'); } } customElements.define('xt-vertical-layout', VerticalLayout); // dynamically inserted const elem = document.createElement('xt-vertical-layout'); elem.setAttribute('width', '25px'); elem.setAttribute('height', '25px'); document.body.append(elem); 

 xt-vertical-layout { border: 1px solid; display: inline-block; } 

 <xt-vertical-layout height="30px" width="50px"></xt-vertical-layout> <xt-vertical-layout height="50px" width="150px"></xt-vertical-layout> <xt-vertical-layout height="10px" width="50px"></xt-vertical-layout> 

And if you really do not want to modify the serialized DOM, then you can append a stylesheet inside the shadowDOM of your elements, and set a rule there. But note that doing so, you will loose support for older browsers as this feature can't be polyfilled.

 class VerticalLayout extends HTMLElement { constructor() { super(); } connectedCallback() { const shadow = this.attachShadow({mode: 'open'}); const style = document.createElement('style'); style.textContent = `:host { width: ${ this.getAttribute('width') }; height: ${ this.getAttribute('height') }; }`; shadow.append(style); } } customElements.define('xt-vertical-layout', VerticalLayout); // dynamically inserted const elem = document.createElement('xt-vertical-layout'); elem.setAttribute('width', '25px'); elem.setAttribute('height', '25px'); container.append(elem); console.log(container.innerHTML); 

 xt-vertical-layout { border: 1px solid; display: inline-block; } .as-console-wrapper {max-height: 120px !important;} 

 <div id="container"> <xt-vertical-layout height="30px" width="50px"></xt-vertical-layout> <xt-vertical-layout height="50px" width="150px"></xt-vertical-layout> <xt-vertical-layout height="10px" width="50px"></xt-vertical-layout> </div> 

Answer 2

Custom tags will have a display of inline which cannot have width and height. You need have a display of block or inline block.

 addContent('Here is some content', 200, 50); function addContent(content, width, height) { const elm = document.createElement('xt-vertical-layout'); elm.setAttribute('style', `width: ${width}px; height: ${height}px;`); elm.innerText = content; document.body.append(elm); } 

 xt-vertical-layout { display: inline-block; color: white; padding: 5px; background-color: red; }