全局CSS

button {
    --attr-bg: attr(bgcolor color, deeppink);
    --attr-color: attr(color color, white);
    height: 60px;
    background-color: var(--attr-bg, #eee);
    color: var(--attr-color);
    font-size: 125%;
    border: 0;
}
[ml] {
    --ml: attr(ml px);
    margin-left: var(--ml);
}
[mt] {
    --mt: attr(mt px);
    margin-top: var(--mt);
}
[fz] {
    --fz: attr(fz px);
    font-size: var(--fz);
}
[lh] {
    --lh: attr(lh px);
    line-height: var(--lh);
}

具体元素和代码

• 按钮-点击属性变化变色

  <button id="button1" bgcolor="deepskyblue" color="white">按钮-点击属性变化变色</button>

• 按钮-无bgcolor属性-使用候补颜色

  <button color="white">按钮-无bgcolor属性-使用候补颜色</button>

• 按钮-直接--attr:attr()

  <button id="button3" class="button" size="20">按钮-直接--attr:attr()</button>

• 文字

  <button ml="20" mt="1em" fz="14" lh="24px">文字</button>

可以纯CSS实现组件

代码：

<img-pencil url="./example.jpg"></img-pencil>

img-pencil {
    display: block;
    width: 256px; height: 256px;
    position: relative;
    --pencil-img: attr(url url);
    z-index: 0;
    overflow: hidden;
}
img-pencil::before {
    content: '';
    display: block;
    height: inherit;
    background: var(--pencil-img) -1px -1px, var(--pencil-img);
    background-size: calc(100% + 1px);
    background-blend-mode: difference;
    filter: brightness(2) invert(1) grayscale(1);
}
img-pencil::after {
    content: '';
    position: absolute; left: 0; top: 0;
    height: inherit; width: inherit;
    background: var(--pencil-img);
    background-size: 100%;
    mix-blend-mode: color;
}