| import $ from 'jquery'; | |
| // $(document).ready(() => { | |
| // // Создание кластеризатора с произвольным HTML-макетом иконки кластера | |
| // class CustomCluster { | |
| // // Зададаем макет метки кластера | |
| // createCluster() { | |
| // return ymaps.templateLayoutFactory.createClass( | |
| // '<div class="ymap-cluster-icon">{{ properties.geoObjects.length }}</div>', | |
| // ); |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()
| :root { | |
| --fz: 16px; | |
| } | |
| div { | |
| font-size: var(--fz); | |
| } | |
| @media screen and (min-width: 450px) { | |
| p { |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Web-components and electron</title> | |
| <style> | |
| my-app::part(title) { | |
| color: cyan; |
| // ----------------------------------------------------------------------------- | |
| // Objects | |
| // ----------------------------------------------------------------------------- | |
| // const Reptile = function(name, canItSwim) { | |
| // this.name = name; | |
| // this.canItSwim = canItSwim; | |
| // }; | |
| // Reptile.prototype.doesItDrown = function() { |
| const [,,,, five] = [1, 2, 3, 4, 5, 6, 7]; | |
| console.log(`Selected: ${five}`); |
| const addres = ['37.6068', '55.7386']; | |
| function getCoordinates(addres) { | |
| const coordinates = { | |
| lon: addres[0], | |
| lat: addres[1], | |
| }; | |
| return [coordinates.lon, coordinates.lat]; | |
| }; |
| /* Раскоментируйте чтобы увидеть изменения */ | |
| /* p { | |
| color: coral; | |
| } */ | |
| /* Переопределяет встроенные стили компонента */ | |
| /* Раскоментируйте чтобы увидеть изменения */ | |
| /* p:last-of-type { | |
| color: cyan; | |
| } */ |
| /* Стилизуем части */ | |
| /* Из index.js */ | |
| my-app::part(text-first) { | |
| color: cyan; | |
| } | |
| /* Из my-greeting.js */ | |
| my-app::part(title-color) { | |
| color: purple; |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Test</title> | |
| <link rel="modulepreload" href="log.js"></link> | |
| <link rel="modulepreload" href="import:lodash"> | |
| <script type="importmap"> | |
| { |