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

Question

我正在创建自定义html标记/元素，然后将这些标记/元素通过JavaScript / jQuery动态添加。 我的最终目标是创建一个自定义元素，例如<xt-vertical-layout height="30px" width="50px"></xt-vertical-layout> ，其中高度和宽度将设置渲染的大小。 我已经弄清楚了如何创建自定义元素并具有可以保存数据的自定义属性，但是我似乎找不到找到修改渲染的方法。 需要明确的是，我没有CSS高度和宽度不起作用的问题。 我的问题是，我可能会拥有数百个大小不一的元素，这些元素在文档加载后很好地注入DOM之前是未知的。

我最初使用属性选择器研究了CSS，但似乎无法将属性值向下传递到CSS规则中。 同样，我研究了CSS的attr()函数，但似乎这仅适用于content 。 我发现CSS4中的所有属性都允许使用此函数的一些文档，尽管我随后读到一些内容说CSS4将不会发布，而CSS将开始按模块进行更新，因此看来这并没有成为当前标准。

任何可以阐明的话题将不胜感激。 我觉得有某种方法可以做到这一点，但我不太确定该怎么做。 不过要明确一点，我不希望使用JavaScript / jQuery解析标记并使用$().css()修改该元素之类的东西，因为这样会修改实际的标记。 我的愿望是使标记保持不变，并且属性修改呈现，类似于<img/>标签的工作方式。

编辑：我不介意在自定义元素的构造函数中使用JS / jQuery进行此操作，前提是可以在其中完成此操作而无需修改内联style属性，而使标记保持不变。

Answer 1

通常，您可以在CustomElement的connectedCallback类中处理此问题，在该类中，您可以像this访问节点，以及从DOMElement继承的DOM方法（如getAttribute() 。

 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> 

而且，如果您确实不想修改序列化的DOM，则可以在元素的shadowDOM内附加样式表，并在那里设置规则。 但是请注意，这样做将无法支持旧版本的浏览器，因为该功能无法被多重填充。

 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

自定义标签将具有内联显示，不能具有宽度和高度。 您需要显示块或内联块。

 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; }