var type = `${['add', 'del'][+(oldVal > newVal)]}`;
var type = ['add', 'del'][+(oldVal > newVal)];а можешь еще расшифровать что происходит в твоем коде?
['add', 'del'][+(oldVal > newVal)]?oldVal > newVal ? 'del' : 'add'
<div class="container">
<div class="yellow"></div>
<div contenteditable="true"></div>
</div>.container {
display: inline-flex;
width: 200px;
height: 400px;
flex-direction: column;
border: 10px solid red;
}
.yellow {
background: yellow;
flex-grow: 1;
}
div[contenteditable] {
background: #47f;
max-height: 300px;
overflow-y: auto;
}-= означает вычесть и присвоить результат. Почему вычитаем -2, а не прибавляем 2? Потому что innerHTML - это строка, а сложение строк и чисел в javascript'е имеет результатом строку, т.е. вместо 3 было бы 12, вместо 4 было бы 22, вместо 5 было бы 32. А вот вычитание из строки преобразует строку в число, так что получаем нужный результат.this.innerHTML *= 2.
Как реализована инкапсуляция стилей в angular'е. Рекомендую попробовать разобраться самому - открываете консоль, вкладка с DOM-деревом, смотрите как выглядят элементы и стили с инкапсуляцией. Затем отключаете инкапсуляцию и смотрите ещё раз. Осознаёте, в чём разница. Если же лень, то...
Всем элементам компонента с инкапсулированными стилями добавляется уникальный атрибут (в смысле - у каждого компонента свой), и этот же атрибут добавляется всем css-селекторам стилей компонента - таким образом гарантируется, что стили не будут применены за пределами компонента.
Если же у какого-то компонента инкапсуляция отключена, то появляется возможность применения его стилей к элементам других компонентов - просто в силу большей специфичности. Можете попробовать в своём примере отключить инкапсуляцию у одного из компонентов (любого, это не важно) и добавить к его background'у !important - элемент второго компонента, несмотря на включенную инкапсуляцию, перекрасится в цвет первого.