ウェブが現在存在しているとしてあなたの要素を変形からCSSコードを停止することは事実上不可能です。あなたが本質的に話しているのは、サンドボックス要素で、他のコードによって変更されないようにします。
これはiframeで行うことができますが、それは恐ろしい、そして確かにあまりにも多くの愚か者です。
一方、未来は明るいです！シャドー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>
私たちは、その後に、テンプレートに影DOMを作成するためのJavascriptの少しを使用してコンテンツを追加しますそれ：
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