Houdini CSS: um jeito mágico de criar estilos personalizados | Alura Cursos Online

//Seleciona o elemento do DOM que queremos alterar
var exemploTypedOM = document.querySelector("#exemplo")
//Cria uma variável e armazena o valor 20, lido como string pelo JavaScript
var newFontSize = 70
//Seleciona o estilo de tamanho de fonte do elemento HTML e armazena a concatenação das strings
var novoEstilo = exemploTypedOM.style.fontSize = newFontSize + "px"; 
//Exibe o resultado no console do navegador
console.log(novoEstilo);

//Seleciona o elemento do DOM que queremos alterar
var exemploTypedOM = document.querySelector("#exemplo")
// Pega o valor inicial atribuído no CSS padrão
exemploTypedOM.computedStyleMap().get("font-size");
// Atribui novos valores de estilo para o tamanho da fonte
exemploTypedOM.attributeStyleMap.set("font-size", CSS.em(2));
// Aplica o novo estilo
var novoEstilo = exemploTypedOM.attributeStyleMap.get("font-size")
// Visualiza o objeto criado no console do navegador
console.log(novoEstilo)

/*Criação das variáveis de cor*/
:root {
    --cor-a: red;
    --cor-b: blue;
}
/*Definição do tamanho da caixa e aplicação da animação e cor de fundo*/
.caixa {
    width: 300px;
    height: 300px;
    animation: 3s mudaCor infinite alternate linear;
    background-color: var(--cor-animada)
}
/*Criação da animação*/
@keyframes mudaCor {
    from {
        --cor-animada: var(--cor-a);
    }
    to {
        --cor-animada: var(--cor-b);
    }
}

//Registrando a classe com um nome para usarmos na propriedade background-image
registerPaint('border-radius-invertido', class BorderRadiusInvertidoPainter {
    // Define as propriedades CSS que serão observadas e usadas pelo paint
    static get inputProperties() {
        return [, ];
    }
    
    () {

    
    context.();
    
    context.();
    
    context.(x, y, radius, ,  * .);
    
    context.();
    
    context.(x - radius, y - radius, radius * , radius * );
    
    context.();
}

() {
    
     valorDoArredondamento = (props.(&#;--border-radius-invertido&#;));
    
     corDeFundo = props.(&#;--background-color&#;).();
    
    ctx. = corDeFundo;
    
    ctx.(, , geom., geom.);
    
     vertices = [
        [, ],
        [geom., geom.],
        [, geom.],
        [geom., ] 
    ];
    
    vertices.(([x, y]) =&gt; .(ctx, x, y, valorDoArredondamento));
}

<head>
    <link rel="stylesheet" href="style.css">
    <script>
        CSS.paintWorklet.addModule('script.js');
    </script>
</head>
<body>
    <div class="radius-invertido"></div>
</body>

.radius-invertido {
    width: 300px;
    height: 300px;
    display: inline-block;
    background-color: transparent;
    --background-color: blue;
    background-image: paint(border-radius-invertido);
    --border-radius-invertido: 60;
}

<head>
    <link rel="stylesheet" href="style.css">
    <script>
    CSS.layoutWorklet.addModule("https://cdn.jsdelivr.net/gh/GoogleChromeLabs/houdini-samples/layout-worklet/masonry/masonry.js");
    </script>
</head>
<body>
    <div style="background-color: #9400d3; width: 140px; height: 140px;">

//Registrando um novo layout chamado 'masonry'
registerLayout(,  {
  
    () {
    
     [, ];
  }
  
   () {
  }
  
   () {


 inlineSize = constraints.; 

 padding = (styleMap.(&#;--padding&#;).());

 columnValue = styleMap.(&#;--columns&#;).();
 columns = (columnValue);

 (columnValue == &#;auto&#; || !columns) {
  
  columns = .(inlineSize / ); 
}

 childInlineSize = (inlineSize - ((columns + ) * padding)) / columns;

 childFragments =  .(children.((child) =&gt; {
   child.({ : childInlineSize });
}));

 autoBlockSize = ;

 columnOffsets = (columns).();

 ( childFragment  childFragments) {
  
   min = columnOffsets.((acc, val, idx) =&gt; {
     (!acc || val &lt; acc.) {
       { idx, val };
    }
     acc;
  }, { : +, : - });
  
  childFragment. = padding + (childInlineSize + padding) * min.;
  childFragment. = padding + min.;
  
  columnOffsets[min.] = childFragment. + childFragment.;
  autoBlockSize = .(autoBlockSize, columnOffsets[min.] + padding);
}

 { autoBlockSize, childFragments };

Houdini CSS: um jeito mágico de criar estilos personalizados | Alura Cursos Online