请教是如何处理的

[stoneskin1206]

<template><div w="full" py="4" px="4"></div></template>

上述标签，通过浏览器查看，会生成以下的css样式，请问是通过什么原理生产的？
环境是vue3 + vite + element-plus, 还用到了scss，上述代码是vue文件里的模板代码
[py~="4"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
[px~="4"] {
  padding-left: 1rem;
  padding-right: 1rem;
}
.w-full, [w~="full"] {
  width: 100%;
}