HTMLElement and CSS variables

Developers: Plugin & API
1

Hello! I want my plugin to create HTML element with width, specified by plugin user. The logic is:

  1. User type a width in a custom codeblock, ex. width: 100px
  2. My plugin read this string and pass it to createEl(), now it looks like:
const row = el.createEl('div', { cls: 'segments-row', attr: {
			'element-width': width
		}});
  1. CSS class reads the attribute and sets it as width:
.segments-row {
  --element-width: attr(element-width);
  background: transparent;
  display: flex;
  justify-content: center;
  gap: 1%;
  width: var(--element-width);
  height: 20px;
  margin: 10px 20px;
}

Something is wrong with this steps, because width of my element still looks like auto. Newbie to HTML/CSS here…

2

More coding give me this result:

input: 100

const row = el.createEl('div', { cls: 'segments-row', attr: {
			'element-width': Number(width)
		}});

.segments-row {
	--element-width: attr(element-width, auto);
	background: transparent;
  display: flex;
  justify-content: center;
  gap: 1%;
	width: calc(var(--element-width)*1px);
	height: 20px;
	margin: 10px 20px;
}

Still no luck though…