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/>标签的工作方式。

编辑： 如果可以在不修改内联style属性而无需更改标记的情况下在自定义元素的构造函数中使用JS / jQuery，则我不介意这样做。

Answer 1

通常，您可以在CustomElement的类connectedCallback中处理此问题，在该类中，您可以以this的形式访问该节点，如果节点的继承自HTMLElement，则可以像getAttribute()那样访问其DOM方法。

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

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

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

DateTime()

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

2 个答案: