Это практически невозможно остановить код CSS от изменения ваших элементов, так как в настоящее время существует веб. О чем вы, по сути, говорите, это sandboxing ваших элементов, не позволяя им быть модифицированными другим кодом.
Вы можете сделать это с помощью iframe, но это ужасно и почти наверняка слишком много.
С другой стороны, будущее светлое! Существует функция, называемая Shadow DOM, которая по существу работает, чтобы вы могли реализовать свои собственные элементы и изолировать их от остальной части вашего кода. Уже такие элементы, как input и video, работают за кулисами: теперь мы можем делать то, что делают браузеры в течение многих лет.
Вы можете создать элемент: мы назовем его solid-button.
<solid-button></solid-button>
Затем мы напишем код, чтобы войти в него. Мы поместим в template, чтобы он не появляется на экране, пока мы хотим:
<template id="solid-button-src">
<style>
button {
width: 100px;
height: 100px;
background-color: green;
border: solid 1px black;
}
</style>
<button></button>
</template>
Затем мы используем немного Javascript, чтобы создать Shadow DOM и добавить содержимое в шаблоне в это:
customElements.define('solid-button', class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({
mode: 'open'
});
const template = document.querySelector('#solid-button-src');
const clone = document.importNode(template.content, true);
shadowRoot.appendChild(clone);
}
});
Это работает в некоторых браузеров сейчас, но далеко не достаточно, чтобы сделать это готовым к производству. Ваш пользователь может применять стили к solid-button, но они не будут влиять на содержимое внутри. Если у вас есть современный браузер, вы можете увидеть это ниже.
Очевидно, что это не решение для вас сейчас, но это может быть будущее.
customElements.define('solid-button', class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({
mode: 'open'
});
const template = document.querySelector('template');
const clone = document.importNode(template.content, true);
shadowRoot.appendChild(clone);
}
});
button {
height: 100px;
width: 100px;
background-color: red;
border: solid 1px black;
}
.class1 {
height: 100px;
width: 100px;
background-color: blue;
}
my-button {
background: red; /* does nothing visible */
}
<button></button>
<button id="id1" class="class1"></button>
<solid-button></solid-button>
<solid-button class="class1"></solid-button>
<template>
<style>
button {
width: 100px;
height: 100px;
background-color: green;
border: solid 1px black;
}
</style>
<button>
<slot name="content"></slot>
</button>
</template>
Может быть, вы ищете '' важно – Hackerman
если я не установлен атрибут я наклоняю установить важный –
Как это:! Https://jsfiddle.net/u4rvx6Lk/1/ – Hackerman