Merge pull request #2055 from stefansundin/hide-shadow-dom-wrappers-better

Stop pages from being able to style the shadow DOM wrapper div element
This commit is contained in:
Sami Vänttinen 2023-12-23 16:01:53 +02:00 committed by GitHub
commit ac04b7b235
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 7 additions and 1 deletions

View file

@ -87,6 +87,7 @@ class Autocomplete {
const styleSheet = createStylesheet('css/autocomplete.css');
const colorStyleSheet = createStylesheet('css/colors.css');
this.wrapper = kpxcUI.createElement('div');
this.wrapper.style.all = 'unset';
this.wrapper.style.display = 'none';
styleSheet.addEventListener('load', () => this.wrapper.style.display = 'block');
this.container = kpxcUI.createElement('div', 'kpxcAutocomplete-container', { 'id': 'kpxcAutocomplete-container' });

View file

@ -122,6 +122,7 @@ kpxcBanner.create = async function(credentials = {}) {
const colorStyleSheet = createStylesheet('css/colors.css');
const wrapper = document.createElement('div');
wrapper.style.all = 'unset';
wrapper.style.display = 'none';
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });

View file

@ -128,13 +128,14 @@ kpxcCustomLoginFieldsBanner.create = async function() {
const colorStyleSheet = createStylesheet('css/colors.css');
const wrapper = document.createElement('div');
wrapper.style.all = 'unset';
wrapper.style.display = 'none';
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
this.shadowRoot.append(colorStyleSheet);
this.shadowRoot.append(styleSheet);
this.shadowRoot.append(defineStyleSheet);
this.shadowRoot.append(buttonStyleSheet);
this.shadowRoot.append(styleSheet);
// Only create the banner to top window
if (window.self === window.top) {

View file

@ -160,6 +160,7 @@ TOTPFieldIcon.prototype.createIcon = function(field, segmented = false) {
const styleSheet = createStylesheet('css/totp.css');
const wrapper = document.createElement('div');
wrapper.style.all = 'unset';
wrapper.style.display = 'none';
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');

View file

@ -292,6 +292,7 @@ kpxcUI.createNotification = function(type, message) {
const styleSheet = createStylesheet('css/notification.css');
notificationWrapper = notificationWrapper || document.createElement('div');
notificationWrapper.style.all = 'unset';
notificationWrapper.style.display = 'none';
styleSheet.addEventListener('load', () => notificationWrapper.style.display = 'block');
this.shadowRoot = notificationWrapper.attachShadow({ mode: 'closed' });

View file

@ -109,6 +109,7 @@ UsernameFieldIcon.prototype.createIcon = function(field) {
const styleSheet = createStylesheet('css/username.css');
const wrapper = document.createElement('div');
wrapper.style.all = 'unset';
wrapper.style.display = 'none';
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');